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Introduction 


or beginner it's not easy to build website application when they are even don't know 
where they should start to write code and implement their ideas. 


In this book I will try to guide in a simplest and in a structured way. Keep in mind that 
this way will never works without your effort also. 


I hope you follow all instructions in this book, and also do it your self, so in the end of 
this book, you can get benefits by following the whole part of this book. Also you will get the 
concept on how to build the web application, so in the next you can do more than just it. 


In this book we will use 
Front End Tools 


v Html + Css + Javascript 
v Bootstrap + jQuery 


Back End Tools 

v PHP (pure/native) 
Database 

v MySql 

Template 

v Start Bootstrap Template 


Make sure you’ ve installed Xampp or another packages depending on your operating system in 
your computer as web server and PHP+MYSQL requirement. 


Need a little bit knowledge about programming such as html, css, javascript, sql but don’t worry 
just follow every instructions in this book, you can do it under 72 Hours! 


CHAPTER 1: Preparation 


1.1 Folder Structure 


The first thing we need to do when we want to build an website application is the 
structure of folder, folder structure have no any rules, its free to create our own structure 
folder, in this case we just create simple folder structure so we don't need to think too much 
about folder, just focus to code and how to build our application 


Here is the structure of folder of this application 
ProductDonations 

admin 

config 

CSS 


img 


img 


js 


Create the folder structure so the main folder of project is ProductDonations and has 
admin folder to provide administrator page in our application, then we have config folder to 
put our configuration in our application such as connection into database, getting data 
function, etc 


Also we have css, img, and js folder to store our css file, images, and javscript file, so our 
folder structure must be like this 


» xampp » htdocs » ProductDonations » 


AN 
Name Date modified lype 


“| admin 2019-02-11 12:45... File folder 
“| config 2019-02-11 12:45... File folder 
`l css 2019-02-11 12:46... File folder 
img 2019-02-11 12:46... File folder 
H js 2019-02-11 12:47... File folder 


1.2 Download eguipment 


All files we need in this project such as images, css, and javascript is in this link 


Images: 
/img: 

https://drive.google.com/drive/folders/13CJuo918NwwT GnOwu /38dOPpsgpungk YS 
/css/img: 


https://drive.google.com/open?id=1 AuH 1 gUOwR VZagri4Bu Y Wxp9djBOU-40t 


1.3 Database Structure 


Database Name: product donations 


CREATE DATABASE product donations”, 


Here is database structure for this project [Run Every scripts bellow in database product 
doations] 


“x Table user 

CREATE TABLE m user ( 
1d INT(11) NOT NULL AUTO INCREMENT, 
“username VARCHAR(125) NULL DEFAULT NULL, 
“password VARCHAR(1024) NULL DEFAULT NULL, 
“role INT(1) NULL DEFAULT NULL, 
PRIMARY KEY (id) 

) 

COLLATE-'latin! swedish ci' 

ENGINE=InnoDB 


AUTO_INCREMENT=3; 


INSERT INTO m.user (username), password , role”) VALUES ('admin', 
'$2y$10$FeG8w9llY xMny4UITvu2KOS0bJv9/8EDIwV j8zv9.EFMVICQFosR6', 
1): 


INSERT INTO `m user (username, password , role) VALUES ('ngo', 
'$2y$10$h/ex7N Y vdKuZvZ0runJQ6.XWFuQ1loSuWqm4jATef6H9c2cCf7.z0y’, 
2); 


e, 


e Table product 

CREATE TABLE m products ( 
1d INT(11) NOT NULL AUTO INCREMENT, 
“name” VARCHAR(100) NULL DEFAULT NULL, 
“picture VARCHAR(300) NULL DEFAULT NULL, 
"price DECIMAL(16,2) NULL DEFAULT NULL, 
PRIMARY KEY (id) 

) 

COLLATE-'latin! swedish ci' 

ENGINE-InnoDB 


AUTO INCREMENT-13, 


INSERT INTO m products (“name , ‘picture’, price) VALUES (‘Buku Tulis 
SINAR DUNIA / SIDU 10x38 Lembar', 'buku tulis.jpg', 22400.00); 


INSERT INTO m products (“name , ‘picture’, price) VALUES (‘Whiteboard 
Magnet SAKANA 90 x 180 cm', Papan tulis.jpg', 712500.00); 


INSERT INTO m products (name , picture , price”) VALUES ('Spidol 
Snowman White Board Maker’, 'whiteboard.jpg', 8800.00); 


INSERT INTO m products (name, ‘picture’, price”) VALUES (‘SEMEN 
GRESIK 40 KG 1 DO 200 ZAK’, ‘semen gresik.png', 42000.00); 


INSERT INTO m products (name’, ‘picture’, price) VALUES ('Karpet Masjid 
Al Imam Ukuran 120 x 600 Hijau 28005’, "Karpet Masjid.jpg', 2250000.00); 


INSERT INTO m products Cname’, picture”, price”) VALUES (‘Sandal / Sendal 
Jepit Masjid Mushola Wudhu Wakaf No 1’, ‘sandal masjid.jpg', 9000.00); 


INSERT INTO m products ( name , ‘picture’, price) VALUES (Indomie 1 box 
40 goreng', 1ndomie.jpg', 100000.00); 


INSERT INTO m products (name, ‘picture’, price”) VALUES ('Selimut Hitam 
Putih / Selimut Salur', 'selimut.jpg', 27000.00); 


INSERT INTO m products ('name', ‘picture’, price”) VALUES (“Terpal Plastik 
Jahit Biru 3 x 4 Meter’, 'terpal.jpg', 66000.00); 


Table donations 


CREATE TABLE t donation ( 
“id” INT(11) NOT NULL AUTO INCREMENT, 
“title VARCHAR(250) NULL DEFAULT NULL, 
“description VARCHAR(5012) NULL DEFAULT NULL, 
“picture VARCHAR(300) NULL DEFAULT NULL, 
“created DATETIME NULL DEFAULT NULL, 
“due date DATETIME NULL DEFAULT NULL, 
“status VARCHAR(50) NULL DEFAULT 'onprogress', 
PRIMARY KEY (id) 

) 

COLLATE-'latin! swedish ci' 

ENGINE-InnoDB 

AUTO INCREMENT~50; 


INSERT INTO t donation" (title, description, ‘picture’, created, due date", 
“status) VALUES (SD Ambon 1 ', 'Bantu anak-anak SD Ambon 1 menuntut ilmu, 
menggapai mimpi mereka. WnSekolah mereka saat ini rusak dan membutuhkan 
uluranmu. ', '0c308094-d00c-4543-b82d-4d479d065c39.jpg', 2019-02-10 06:52:49’, 
2019-10-01 00:00:00', 'onprogress'); 


INSERT INTO t donation" (title, description, picture”, created, due date”, 
“status') VALUES (‘Masjid Asy-Syifa Alor', Sudah 64 tahun masjid di pelosok NTT 
ini berdiri. Sudah 64 tahun pula warga bersabar dengan shalat di masjid yang tak 
layak.', ‘masjid alor.jpg', 2019-02-10 07:02:20', "2019-06-02 00:00:00', 'onprogress'); 


INSERT INTO t donation (title, “description, “picture , created, due date", 
“status ) VALUES ('Korban Banjir Kendal’, ‘Kendal memanggil! Korban banjir butuh 
bantuan Anda untuk pulih kembali. ', 'banjir kendal.jpg', 2019-02-10 07:05:16", 
2019-12-02 00:00:00”, 'onprogress'): 


% Table donation history 


CREATE TABLE t donation history ( 
“id INT(11) NOT NULL AUTO INCREMENT, 
“username VARCHAR(100) NULL DEFAULT NULL, 
“t donation needs id INT(11) NULL DEFAULT NULL, 
“qty INT(11) NULL DEFAULT NULL, 
“price DECIMAL(16,2) NULL DEFAULT NULL, 
“total DECIMAL(16,2) NULL DEFAULT NULL, 
“created DATETIME NULL DEFAULT NULL, 
PRIMARY KEY (id) 

) 

COLLATE-'latin! swedish ci' 

ENGINE-InnoDB 

AUTO INCREMENT- 1: 


«e Table donation needs 


CREATE TABLE t donation needs ( 
id INT(11) NOT NULL AUTO INCREMENT, 
“4 donation id” INT(11) NULL DEFAULT NULL, 
“product id” INT(11) NULL DEFAULT NULL, 
“gty need DECIMAL (16,0) NULL DEFAULT NULL, 
"qty donated DECIMAL (16,0) NULL DEFAULT '0', 
PRIMARY KEY (id), 
UNIQUE INDEX 'ung ' (product id, t donation id) 
) 
COLLATE='atin1_swedish_c1' 
ENGINE=InnoDB 
AUTO_INCREMENT=143; 


INSERT INTO t donation needs (t donation id, product id', gty need, 
“gty donated') VALUES (50, 13, 100, 0); 

INSERT INTO t donation needs ('t donation id, product id, gty need , 
“gty donated') VALUES (50, 14, 5, 0); 

INSERT INTO t donation needs (t donation id , product id, gty need , 
“gty donated') VALUES (50, 15, 30, 0); 

INSERT INTO t donation needs ('t donation 1d”, product id', 'qty need, 
“gty donated”) VALUES (51, 16, 10, 0); 


INSERT INTO t donation needs (t donation id”, product id”, gty need”, 
“gty donated') VALUES (51, 17, 1, 0); 
INSERT INTO t donation needs (t donation id, product id”, gty need, 
“gty donated”) VALUES (51, 18, 1, 0); 
INSERT INTO t donation needs (t donation id”, product id”, gty need”, 
“gty donated ) VALUES (52, 19, 1, 0); 
INSERT INTO t donation needs (t donation id, product id', gty need”, 
“gty donated') VALUES (52, 20, 1, 0); 
INSERT INTO t donation needs (t donation id, product id, gty need, 
“gty donated”) VALUES (52, 21, 1, 0); 


Triggert donation history after insert 


DELIMITER // 
CREATE TRIGGER t donation history after insert AFTER INSERT ON 
't donation history FOR EACH ROW BEGIN 

UPDATE t donation needs SET qty donated = qty donated + NEW.qty 
WHERE id = NEW 't donation needs id: 
END// 
DELIMITER ; 
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CHAPTER 2 : Let's Make Code 


1.1 Database Connection 


Create file in config directory and set koneksi.php as the files name 
| koneksi.php 2019-02-09 10:07... PHP File 1 KB 
And write this code inside koneksi.php 
<?php 

date default timezone set('Asia/Jakarta)); // set timezone 

$konek = mysqli connect("localhost", "root", "", "product donations"): 
if ('$konek)( 
die("Error!" . mysqli connect error($konek)); 
) 


= 


6699 


*Server(localhost), user(root), password( 
configuration 


) configurations is depending on your mysql 


2.1 Header 


— le a A M A A x 
Product LI 04 LOUCLO4L4 Donasi Cara Kerja Kami Gallery Donatur Hubungi Kami Login 


KitaMau Products Donation 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT dan diwaktu yang TEPAT 


List Donations List Donated 


To build that front page create index.php file in main folder ( ProductDonations ) folder 


' xampp > htdocs » 


Name ` Date modified Type Size 
admin 2019-02-11641PM File folder 
config 2019-02-11 712PM File folder 
css 2019-02-11 722PM File folder 
“| img 2019-02-11 6:41 PM File folder 
D is 2019-02-11641PM File folder 


Then write this code inside index.php 


2019-02-11 7:13 PM PHP File 6 KB 


<?php 

include "config/pageActive.php"; 
» 
<!DOCTYPE html> 


«html lang="en"> 
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«head» 
<meta charset="UTF-8"> 
<meta name-" viewport" content="width=device-width, initial-scale=1.0"> 
«meta http-equiv="X-UA-Compatible" content="ie=edge"> 
<title>Product Donations</title> 


<link rel='shortcut icon’ type-'image/x-icon' href- favicon.ico' /> 


<link rel="stylesheet" 
href="https://stackpath. bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" 
integrity="sha384- 
GJzZqgFGwb1QTTN6wy59ffF1 BuGJpLSa9DkKMp0DgiMDm41Y Mj70gZWKYbI706tWS" 
crossorigin="anonymous"» 


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" 
integrity="sha384- 
fnmOCgbTIWIl8LyTjo7mOUStjsKC4pOpQbgyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
crossorigin="anonymous"> 


<link rel="stylesheet" href="//code.jquery.com/u1/1.12.1/themes/smoothness/jquery-ui.css"> 

<link rel="stylesheet" href="css/style.css"> 

<link rel="stylesheet" href="css/payment_gateway.css"> 

<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> 
</head> 
<body> 

<header> 

<nav class="navbar navbar-expand-lg navbar-light"> 


<a href="index.php" class="navbar-brand ml-3">Product<span style="color: 
lightgreen">Donations</span></a> 


«button class-"navbar-toggler" type="button" data-toggle="collapse" data- 
target="#navbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle 
Navigation"» 
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«span class="navbar-toggler-icon"></span> 


«/button» 


«div class="collapse navbar-collapse"></div> 
<div class="collapse navbar-collapse" id="navbarMenu"> 
<ul class="navbar-nav mr-auto"> 
<li class="nav-item <?php echo ShomeActive, ?> "> 
«a href- "index.php" class="nav-link">Home</a> 
</li> 
<li class="nav-item <?php echo $donationActive; ?>"> 
«a href- "index.php ?page-donation" class="nav-link">Donasi</a> 
</li> 
<li class="nav-item <?php echo $eventsActive; ?>"> 
<a href="index.php?page=carakerjakami" class="nav-link">Cara Kerja Kami</a> 
</li> 
<li class="nav-item <?php echo $galleryActive; ?>"> 
«a href="index.php?page=gallery" class="nav-link">Gallery</a> 
</li> 
<li class="nav-item <?php echo $DonatedActive; ?>"> 
«a href="index.php?page=donated" class="nav-link">Donatur</a> 
</li> 
<li class="nav-item <?php echo $contactusActive; ?>"> 
<a href- "index.php ?page-contact us" class="nav-link">Hubungi Kami</a> 
</li> 


</ul> 
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«a href="admin/login.php" class=" my-2 my-lg-0"» 
«button class="btn menu-right-btn border" type="submit"> 
Login 
«/button» 
«/a» 
«/div» 
</nav> 


</header> 


<main> 
<?php 
if(!empty($page)): 
include $page.".php"; 
» 
<?php else: ?> 
«div class="container-fluid p-0"» 
«div class="site-content"> 
<div class="d-flex justify-content-center"> 
<div class="d-flex flex-column"> 
«hl class="site-title">KitaMau Products Donation«/h1» 
<p class="site-desc"> 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT 
dan diwaktu yang TEPAT 


</p> 
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<div class="d-flex flexrow"> 


<input type="button" value="List Donations" class="btn site-btnl px-4 py-3 


mr-4 btn-dark" id="listDonation" /> 


<input type="button" value="List Donated" class="btn site-btn2 px-4 py-3 


mr-4 btn-light" id="listDonated" /> 
</div> 
</div> 
</div> 
</div> 


</div> 


<?php endif; ?> 


</main> 


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- 
q81/X+965DzO0rT7abK4 1 JStQlIAgVgRVzpbzo5smX Kp4 YfRvH+8abtTE1 Pi6jizo" 
crossorigin-" anonymous" »— script» 


«script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" 
integrity="sha384- 
wHAIFfRIMFy615SRaxvfOC1fBUQy 1 xHdJ/yo17FRNXMRBu5 WHdZYulhA6ZOblgut" 
crossorigin="anonymous'></script> 


<script src="https://stackpath. bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" 
integrity="sha384- 
BOUglyR+jN6CkvvICOB2joaf51413 gm9GU6Hcl og6Ls7i6U/mkkaduKaBhlA Xv9k" 
crossorigin="anonymous"></script> 


<script src="https://unpkg.com/scrollreveal @4.0.5/dist/scrollreveal.js"></script> 
<script src="//code.jquery.com/jquery-1.12.4.js" ></script> 
«script src="//code.jquery.com/u1/1.12.1/jquery-u1.js"></script> 


<script src="js/main.js"></script> 
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<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<script> 
var sr = ScrollReveal({ duration: 1000 }); 
sr.reveal('.site-content .d-flex'); 
sr.reveal('.section-1 .card'); 
sr.reveal('.section-2 .d-flex'); 
sr.reveal('.section-3 .col-md-4'); 
sr.reveal('.section-4 .col-md-7, .col-md-5'); 
</script> 
</body> 
</html> 
<div id="dialog" title="List Donation"> 
<p>Anda ingin melihat daftar donasi?</p> 
</div> 
<div id="dialogDonate" title="List Donasi yang telah selesai"> 
<p>Anda ingin melihat daftar donasi yang telah tercapai?</p> 
</div> 


After you write above code, take a minutes to get a coffee © 
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3.1 Set Active Page 


Now write file inside config folder set files name pageActive.php 


> xampp > htdocs > ProductDonations :[ config | 


Name ` Date modified Type 


2019-02-11 6:48 PM PHP File 
2019-02-10 6:24 AM PHP File 


Write this code inside pageActive file 
<?php 


$page = isset($ GET['page'])?$. GET['page']:”; 


1 KB 
1 KB 


$homeActive = $donationActive = $eventsActive = $galleryActive = $DonatedActive = 


"nn, 


$contactusActive = ""; 

if(in_array($page, array("donation","donation_detail","bantu"))){ 
$donationActive = "active"; 

}elseif(in_array($page, array("events", "carakerjakami"))){ 
$eventsActive = "active"; 

) 

elseif($page == "gallery")( 
$galleryActive = "active"; 

) 

elseif($page == "donated")( 
$DonatedActive = "active"; 

J 

else if($page == "contact. us")( 


$contactusActive = "active"; 


elsef 
$homeActive = "active"; 
) 
> 


The code above is set color [green] in this case to active menu 


And now we need to load our custom css to make our page more beautiful 
Create style.css file inside css file folder and write this code 


@import 
url(‘https://fonts. googleapis.com/css?family=Lato|Pacifico|Righteous|Roboto+Condensed|Ubuntu 
» 


body{ 
padding: 0%; 
margin: 0%; 


font-family: 'Lato': 


.navbar-brand í 
font-family: ‘Pacifico’; 
font-size: 35px; 


color: lightcoral !important; 


nav-link { 


font-size: 16px; 
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margin: 15px, 
color: black !important; 


font-family: Roboto Condensed’; 


nav-link:hover{ 


color: lightgreen !important; 


„active .nav-link{ 


color: lightgreen !important; 


.menu-right-btni 
padding: 13px 46px, 
margin-right: 4%; 
background-color: transparent, 


transition: all 300ms ease-in: 


.menu-right-btn:hover { 
color: white; 


background-color: lightgreen; 
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/* Style main page */ 

.site-content | 
background-image: url(‘img/pexels-1.jpg'); 
background-attachment: fixed; 


background-size: cover; 


„site-title, .site-desc { 
font-style: italic; 
color: white; 
font-family: 'Righteous'; 


background-color: transparent; 


.site-title ( 
margin-top: 30%; 
margin-bottom: 6%; 


font-size: 50px; 


.Site-desc { 


font-size: 14px; 


.site-btn1 í 
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margin-left: 2096 


background-color: black, 


„site-btnl, .site-btn2 { 
margin-top: 5%; 
margin-bottom: 20%; 


J 


Don't forget to take the images we need in this link 


https://drive.google.com/open?id=1 AuH1 gUOWR VZagri4BuY Wxp9djBQU-40t 


Download images there and put to css/img folder 


xampp > htdocs >) ProductDonations > css > img 


L 


PT | 
"=. e | — AA 
fe jpg lovejpg pexels-1.jpg 


And now create main.js in js folder 


> xampp > htdocs > [ProductDonations > js 


Date modified Iype 


Name 


2019-02-11 7:39 PM JavaScript File 


Write this code inside main.js 


$(function() ( 
$("#dialog").dialog({ 


O KB | 
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autoOpen : false, 

modal : true, 

show : "blind", 

hide : "blind", 

width: 350, 

modal: true, 

resizable: false, 

draggable: false, 

'buttons': { 
'Asyiappp': function(event) { 

window.location.href = "index.php?page=donation"; 

J, 
'Ndak Mau: function(event) { 


$("#dialog").dialog("close"); 


D; 


$("fdialogDonate").dialog(( 
autoOpen : false, 
modal : true, 
show : "blind", 
hide : "blind", 
width: 350, 


modal: true, 


resizable: false, 
draggable: false, 
‘buttons’: { 
'Asyiappp': function(event) | 
window. location.href = "index.php?page=donated"; 
Ip 
'Ndak Mau': function(event)( 


$("fdialogDonate").dialog("close"); 


// Action button click 
$("#listDonation").click(function() í 
$("#dialog").dialog("open"); 
return false; 


D; 


$("#listDonated").click(function() í 
$("#dialogDonate").dialog("open"); 
return false; 


D; 


$("[name='qty']").change(function()( 
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var price = $("[name='price']").val(); 


var total = $(this).val() “ price; 


$("[name='total']").val(total); 


}) 


$(‘#historyAll').DataTable(); 


D; 
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4.1 Section | in main page 


Now we will create section in main page after site header content 


Dibutuhkan Segera 
& Waktu donasi yang hampir habis 


Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. Dan juga donasi-donasi 
yang belum tercapai tetapi waktunya hanya tinggal sedikit. Ayo semakin banyak yang berdonasi 
semakin banyak yang terbantu. 


taast à Mhs 
Masjid Lua 


Butuh Perbalkan 


Korban Banjir Kendal SD Ambon 1 Masjid Asy-Syifa Alor 
Kendal memanggil! Korban banjir butuh Bantu anak-anak SD Ambon 1 Sudah 64 tahun masjid di pelosok NTT 
bantuan Anda untuk pulih kembali. menuntut ilmu, menggapai mimpi ini berdiri. Sudah 64 tahun pula warga 
mereka. Sekolah mereka saat ini rusak bersabar dengan shalat di masjid yang 


ihat Kebutuha dan membutuhkan uluranmu. tak layak. 


Lihat Kebutuhan 


Lihat Kebutuhar 


Add this code after <div class—”container-fluid p-0”> element 
«div class="section-1"'> 
«div class="container text-center"> 
«hl class="heading-1">Dibutuhkan Segera</h1> 
«hl class="heading-2">& Waktu donasi yang hampir habisx/h1» 
<p class="para-1"> 
Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. 


Dan juga donasi-donasi yang belum tercapai tetapi waktunya hanya tinggal 
sedikit. 


Ayo semakin banyak yang berdonasi semakin banyak yang terbantu. 


</p> 
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«div class="row justify-content-center text-center"> 
<?php 
$dataDonation = get data donation due 30): 
while($data = mysgli fetch assoc($dataDonation)): 
= 
«div class="col-md-4"> 
«div class="card"> 


<center><img style="height: 200px; width: 320px;" src="1mg/«?php echo 
$data['picture']; ?5" alt="Image not loaded" class="card-image-top"></center> 


<div class="card-body"» 
<h4 class="card-title"><?php echo $data['title']; ?></h4> 
<p class="card-text"><?php echo $data['description']; ?></p> 


«a href="index.php?page=donation_detail&id=<?php echo $dataf'id'), 


i> 
<button type="button" class="btn btn-primary">Lihat 
Kebutuhan</button> 
</a> 
</div> 
</div> 
</div> 
<?php endwhile; 7 
</div> 
</div> 
</div> 


So in index.php the element structure will be 
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y($page)): 
$page 


> 


Then in our style.css add this code in the last line 
/“ Section 1 start CSS 5/ 
.section-1 .heading-1 { 


margin-top: 8%; 


.section-1 .heading-2 { 
margin-bottom: 5%; 


font-size: 39px; 


.section-1 .para-1 ( 
width: 6090; 
margin-left: 2090; 


margin-bottom: 590 
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.section-1 .card-text .para-11 


color: rgba(0, 0, 0, 0.59) 


.section-1 ( 


margin-bottom: 8%; 


.cardf 


width: 20rem: 


Refresh index.php and section 1 will be 


Dibutuhkan Segera 
& Waktu donasi yang hampir habis 


Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. Dan juga donasi-donasi 
yang belum tercapai tetapi waktunya hanya tinggal sedikit. Ayo semakin banyak yang berdonasi 
semakin banyak yang terbantu. 


Fatal error 
: Uncaught Error: Call to undefined function get data donation due 3() in G:\xampp\htdocs\ProductDonations\index.php:94 Stack trace: #0 {main} thrown in 
G:\xampp\htdocs\ProductDonations\index.phpon line94 


It's okay about the Fatal error, because we are not create code to show data yet from database 


Create getData.php file in config folder 
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> xampp > htdocs > ProductDonations 


Name | Date modified Type Size 

E getData.php | 2019-02-11 #51PM PHP File Ü KB 
koneksi.php 2019-02-11 6:48PM PHP File 1 KE 

E pageActive.php 2019-02-10 6:24 AM PHP File 1 KB 


Then write this code inside getData.php file 
<?php 


include "config/koneksi.php"; 


function get_data_donation_due_3(){ 
GLOBAL $konek; 
$get data = mysqli query($konek, " 
SELECT 
FROM t_donation 
WHERE 
status = 'onprogress' 


order by due_date desc limit 3 


D 


return $get_data; 


> 


After that we need to load getData.php file in index.php with this code in first line 


include 'config/getData.php': so the index.php will be 


Section 1 will be 


Dibutuhkan Segera 


& Waktu donasi yang hampir habis 


Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. Dan juga donasi-donasi 


yang belum tercapai tetapi waktunya hanya tinggal sedikit. Ayo semakin banyak yang berdonasi 


semakin banyak yang terbantu. 


Wilmage not loaded {Image not loaded 
Korban Banjir Kendal SD Ambon 1 
Kendal memanggil! Korban banjir butuh Bantu anak-anak SD Ambon 1 
bantuan Anda untuk pulih kembali. menuntut ilmu, menggapai mimpi 


mereka. Sekolah mereka saat ini rusak 


Lihat Kebutuhan dan membutuhkan uluranmu. 
Lihat Kebutuhan 


Image not loaded 


Masjid Asy-Syifa Alor 


Sudah 64 tahun masjid di pelosok NTT 

ini berdiri. Sudah 64 tahun pula warga 

bersabar dengan shalat di masjid yang 
tak layak. 


Lihat Kebutuhan 


Image not load right? It's because we don't have any images in img folder that locate at main 


folder 


Download images from this link 


https://drive.google.com/drive/folders/13CJuo918NwwTGnOwu738dQOPpgpungkYS 
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Download all images and put to img folder 


» xampp » htdocs » ProductDonations [img ] no Search img P 
w oY v Ba, 
IO Uio vl 
: + | Sct = (Ls 
0c308094-d00c-4 atkjpg banjir kendal.jpg banjirjpg buku tulis.jpg buku.jpg decommerce.jpg dluarbiasa.jpg dngo.jpg favicon.ico 
543-b82d-4d479d 
065c39.jpg 
indomie.jpg Karpet Masjid.jpg masjid alor.jpg masjid.jpg O Logo.jpg Papan tulis.jpg papbar.jpg sandal masjid.jpg sekolah.jpg selimut.jpg 
— == 
SF 
d | 
semen terimakasih.jpeg terpal.jpg up.png whiteboard.jpg 


gresik.png 


Now section 1 page will be 


Dibutuhkan Segera 
& Waktu donasi yang hampir habis 


Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. Dan juga donasi-donasi 
yang belum tercapai tetapi waktunya hanya tinggal sedikit. Ayo semakin banyak yang berdonasi 
semakin banyak yang terbantu. 


Butuh Perbaikan 


Korban Banjir Kendal SD Ambon 1 Masjid Asy-Syifa Alor 
Kendal memanggil! Korban banjir butuh Bantu anak-anak SD Ambon 1 Sudah 64 tahun masjid di pelosok NTT 
bantuan Anda untuk pulih kembali. menuntut ilmu, menggapai mimpi ini berdiri. Sudah 64 tahun pula warga 
mereka. Sekolah mereka saat ini rusak bersabar dengan shalat di masjid yang 
dan membutuhkan uluranmu. tak layak. 


Lihat Kebutuhan 
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5.1 Section 2 in main page 


Now we're going to create section-2 in our main page, add this code after end of section-1 
«div class="section-2"> 
«div class="container-fluid"» 
«div class="d-flex justify-content-end"> 
«div class="d-flex flex-column m-4"> 
«hl class="heading-1"»Share & Prove your LoveYh1» 


«p class="para"»Bagikan dan buktikan rasa peduli anda agar semakin banyak 
pendonasi</p> 


<input type="button" value="Share" class="btn btn-danger"> 
</div> 
</div> 
</div> 


</div> 


So the index.php will be 


tify-content-end”» 
1 1-4" > 


eading-1">Share 8 Prove your Love</h1> 
`a">Bagikan dan buktikan rasa peduli anda agar semakin banyak pendonasi</p> 


Rir are = cl rtn-danger > 
share DEN DIN-Qange 


The section-2 will be 
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Korban Banjir Kendal 


Kendal memanggil! Korban banjir butuh 
bantuan Anda untuk pulih kembali. 


Lihat Kebutuhan 


In style.css add this code in last line 
/ Section 2 start CSS */ 


.section-2 .container-fluid { 


SD Ambon 1 


Bantu anak-anak SD Ambon 1 
menuntut ilmu, menggapai mimpi 
mereka. Sekolah mereka saat ini rusak 
dan membutuhkan uluranmu. 


Lihat Kebutuhan 


background-image: url(‘img/love.jpg'); 


background-size: cover; 


background-attachment: fixed; 


.section-2 .heading-1 { 
margin-top: 20%; 
margin-bottom: 4%; 


font-family: ‘Righteous’; 


.section-2 .para{ 


font-family: ‘Ubuntu’; 


Masjid Tua 


Butuh Perbaikan 


Masjid Asy-Syifa Alor 


Sudah 64 tahun masjid di pelosok NTT 

ini berdiri. Sudah 64 tahun pula warga 

bersabar dengan shalat di masjid yang 
tak layak. 


Lihat Kebutuhan 


Share & Prove your Love 


Bagikan dan buktikan rasa peduli anda agar semakin banyak pendonasi 
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margin-bottom: 7%; 


.section-2 .para, .section-2 .heading-1 { 
color: whitesmoke; 


width: 80%; 


„section-2 .btn{ 
margin-bottom: 15%; 
width: 30%; 

J 


So the section-2 will be 


Share € Prove your 
Love 


Bagikan dan buktikan rasa peduli anda agar semakin 
banyak pendonasi 


| Share 
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6.1 Section 3 in main page 


After section-2 in index.php file add this code 
«div class="section-3"> 
«div class="container"> 


«div class="row"> 


«div class="col-md-4"» 
«div class="d-flex flex-row"> 
<i class="fas fa-user-shield fa-3x m-2" » Ji» 
«div class="d-flex flex-column"> 
«h3 class="m-2">0+ Instansi</h3> 


<p class="m-2">Sudah lebih dari 0 instansi terbantu berkat dukungan 
anda sampai saat ini</p> 


</div> 
</div> 
</div> 
<div class="col-md-4"> 
<div class="d-flex flex-row"> 
<i class="fas fa-user fa-3x m-2"»x/p 
«div class="d-flex flex-column'» 
«h3 class="m-2">0+ Individu</h3> 


<p class="m-2">Sudah lebih dari 0 orang terbantu berkat dukungan anda 
sampai saat ini</p> 


</div> 


</div> 
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</div> 


<div class="col-md-4"> 
<div class="d-flex flex-row '5 
<i class="fas fa-search fa-3x m-2"></i> 
<div class="d-flex flex-column"> 
<?php 
$dataCount = get_data_count(); 
$dataCount = mysqli_fetch_assoc($dataCount); 
» 
«h3 class="m-2"><?php echo $dataCount| jumlah'): ?>+ Donors</h3> 


«p class="m-2">Sudah <?php echo $dataCount| jumlah']; ?> menunggu 
uluran tangan anda p» 


«/div» 
«/div» 


</div> 


</div> 


</div> 


</div> 
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fa-3x m-2"»«/1» 


d-flex flex-column"» 
"m-2">0+ Instansi</h3> 
'm-2"»Sudah lebih dari @ instansi terbantu berkat dukungan anda sampai 
» 


pr 


fa-user fa-3x m-2"»«/i» 
"d-flex flex-column"» 
="m-2">0+ Individu</h3> 


Add this to style.css 
/ Section 3 Start CSS “/ 
.section-3 { 


margin-top: 6%; 


„section-3 1{ 


color: lightgreen; 


.section-3 p{ 


color: rgba(0, 0, 0, 0.59); 
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Add this PHP function to getData.php file 
function get data count()( 
GLOBAL $konek: 
$get data = mysqli guery($konek, " 
SELECT 
count(*) jumlah 
FROM t donation 
WHERE 


status — 'done' 


D 


return $get_data; 


getData.php — ProductDonations\config 


$get data, 


Ot 
$konek : 


$get data | ($konek, 


$get data, 
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Section-3 will be 


Sas, NA — 


-.. O+ Instansi = O+ Individu (3 O+ Donors 


7.1 Section 4 in main page 
In Index.php after section-3 div 


«div class="section-4 bg-dark"» 
«div class=“container'"» 
«div class="row"> 

«div class="col-md-7"> 
<img src="css/img/fc.jpg" alt="Image" width="590"» 

«/div» 

«div class="col-md-5"» 
«h1 class="text-white"»Bingung mulai dari mana?«/h1» 
«a href="index.php?page=carakerjakami"»Klik disini untuk panduan«/a» 
«p class="para-1"> 


Setelah anda membuat akun anda, anda dapat melihat daftar donasi, yang anda dapat 
berikan sesuai kebutuhan mereka yang anda dapat bantu. 


«br/»«br/» 


Anda juga dapat melihat berdasarkan lokasi terdekat dengan anda, donasi yang 
darurat dan yang waktunya hampir habis tetapi belum tercapai. 


</p> 
</div> 
</div> 
</div> 


</div> 
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In style.css 
/* Section 4 Start CSS */ 
.section-4f 


margin-top: 896, 


.section-4 .col-md-7, .col-md-5f 
margin-top: 1096, 


margin-bottom: 1096: 


.section-4 af 
color: lightgreen: 


font-size: 40px, 


.section-4 .para-14 
color: white: 
font-family: 'Roboto Condensed'; 
margin-top: 7%; 


font-size: 22px; 
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Bingung mulai dari mana? 
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Setelah anda membuat akun anda, anda dapat 
melihat daftar donasi, yang anda dapat berikan 
sesuai kebutuhan mereka yang anda dapat bantu. 


Anda juga dapat melihat berdasarkan lokasi 
terdekat dengan anda, donasi yang darurat dan 
yang waktunya hampir habis tetapi belum tercapai. 


8.1 Footer in main page 


After four section we will create our footer 
Write this code after «main» tag 
<footer> 

«div class="section-5 text-center"> 


«h4 style="margin-top: 5% ;">Dapatkan kabar tentang orang-orang yang membutuhkan 
donasi</h4> 


<h4 class="my-4">Jika anda bersedia</h4> 
«div class="form-inline justify-content-center"> 


<input type="text" name="email" placeholder="Email" size="40" class="form-control 
px-4 py-2" submit=""> 


<input type="button" value="Get Updates" class="btn btn-danger px-4 py-2" 
onclick="location.href='index. php';"> 


</div> 


<div class-"social" style="margin: 5% ;"> 
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«div class="d-flex d-flex-row justify-content-center"> 
<i class="fab fa-facebook-f m-2"></1> 
<i class="fab fa-twitter m-2"></1> 
<i class="fab fa-instagram m-2"></i> 
<i class="fab fa-youtube m-2"></i> 
«/div» 


</div> 


<div class="position-relative"» 

<div class="float-sm-right"> 
ca href="#" class-"o-scroll-up static" title="back to top"» 
«span class="o-scroll-up-text"»«/span» 
<img class="up" src="1mg/up.png"></img> 
<span class-"o-scroll-up-icon" aria-hidden="true"></span><br> 
</a> 

</div> 


</div> 


<hr/> 


<marquee behavior="" direction=""><h5 style="color: lightgreen">Iya Oke Siyap Team 
&copy; 2019 </h5></marquee> 


</div> 


</footer> 
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In style.css 
/* Footer */ 
„social if 

color: green; 


font-size: 20px; 


The footer will be 


Dapatkan kabar tentang orang-orang yang membutuhkan donasi 


Jika anda bersedia 


Email Get Updates 


fvoo 


We're done with main page 


Product D Oona£ion,A Donasi Cara Kerja Kami Gallery Donatur Hubungi Kami 


KitaMau Products Donation 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT dan diwaktu yang TEPAT 


List Donations List Donated 


Login 
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Dibutuhkan Segera 
& Waktu donasi yang hampir habis 


Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. Dan juga donasi-donasi 
yang belum tercapai tetapi waktunya hanya tinggal sedikit. Ayo semakin banyak yang berdonasi 
semakin banyak yang terbantu. 


Butuh Perbaikan 


Korban Banjir Kendal SD Ambon 1 Masjid Asy-Syifa Alor 
Kendal memanggil! Korban banjir butuh Bantu anak-anak SD Ambon 1 Sudah 64 tahun masjid di pelosok NTT 
bantuan Anda untuk pulih kembali. menuntut ilmu, menggapai mimpi ini berdiri. Sudah 64 tahun pula warga 
mereka. Sekolah mereka saat ini rusak bersabar dengan shalat di masjid yang 
| Lihat Kebutuhan | dan membutuhkan uluranmu. tak layak. 


Share € Prove your 


Love 


Bagikan dan buktikan rasa peduli anda agar semakin 
banyak pendonasi 


oo O+ Instansi © 0+ Individu Q 0+ Donors 
Sudah lebih dari O instansi terbantu Sudah lebih dari O orang terbantu Sudah O menunggu uluran tangan anda 
berkat dukungan anda sampai saat berkat dukungan anda sampai saat ini 


ini 
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Bingung mulai dari mana? 


Setelah anda membuat akun anda, anda dapat 
melihat daftar donasi, yang anda dapat berikan 
sesuai kebutuhan mereka yang anda dapat bantu. 


Anda juga dapat melihat berdasarkan lokasi 
terdekat dengan anda, donasi yang darurat dan 
yang waktunya hampir habis tetapi belum tercapai. 


Dapatkan kabar tentang orang-orang yang membutuhkan donasi 


Jika anda bersedia 


Email Get Updates 


fvoo 


45 


Full code of index.php 


<?php 
include "config/pageActive.php"; 
include 'config/getData.php'; 

» 

<!DOCTYPE html> 

«html lang="en"> 

«head» 
«meta charset="UTF-8"> 
«meta name="viewport" content="width=device-width, initial-scale=1.0"> 
«meta http-equiv="X-UA-Compatible" content="1e=edge"> 
<title>Product Donations</title> 


<link rel='shortcut icon' type-'image/x-icon' href='favicon.ico' /» 


<link rel="stylesheet" 
href="https://stackpath. bootstrapcdn.com/bootstrap/4.2. 1/css/bootstrap.min.css" 
integrity="sha384- 
GJzZqFGwb1QTTN6wyS59ffF1 BuGJpLSa9DkKMp0DgiMDm41YMj70gZWKYbI706tWS" 
crossorigin="anonymous"» 


<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" 
integrity="sha384- 
fnmOCqbTIWIj8LyTjo7mOUStjsKC4pOpQbaqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" 
crossorigin- anonymous » 


<link rel="stylesheet" href="//code.jquery.com/u1/1.12.1/themes/smoothness/jquery-ui.css"> 
<link rel="stylesheet" href="css/style.css"> 
<link rel="stylesheet" href="css/payment_gateway.css"> 


<link rel="stylesheet" href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"> 
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</head> 
<body> 
<header> 
«nav class="navbar navbar-expand-lg navbar-light"> 


«a href—"index.php" class="navbar-brand ml-3">Product<span style="color: 
lightgreen">Donations</span></a> 


«button class="navbar-toggler" type="button" data-toggle="collapse" data- 
target="fnavbarMenu" aria-controls="navbarMenu" aria-expanded="false" aria-label="Toggle 
Navigation"» 


«span class="navbar-toggler-icon"></span> 


</button> 


<div class="collapse navbar-collapse"></div> 
<div class="collapse navbar-collapse" id="navbarMenu"> 
<ul class="navbar-nav mr-auto"> 
<li class="nav-item <?php echo $homeActive; ?> "> 
<a href- "index.php" class="nav-link">Home</a> 
</li> 
<li class="nav-item <?php echo $donationActive; ?>"> 
<a href="index.php?page=donation" class="nav-link">Donasi</a> 
</li> 
<li class="nav-item <?php echo $eventsActive; ?>"> 
<a href="index.php?page=carakerjakami" class="nav-link">Cara Kerja Kami</a> 
</li> 
<li class="nav-item <?php echo $galleryActive; ?>"> 


<a href- "index.php ?page-gallery" class="nav-link">Gallery</a> 
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</li> 
<li class="nav-item <?php echo $DonatedActive; ?>"> 
<a href="index.php?page=donated" class="nav-link">Donatur</a> 
</li> 
<li class="nav-item <?php echo $contactusActive; ?>"> 
<a href—"index.php?page—contact us" class="nav-link">Hubungi Kami</a> 
</li> 


</ul> 


<a href- "admin/login.php" class=" my-2 my-lg-0"» 
<button class="btn menu-right-btn border" type="submit"> 
Login 
</button> 
</a> 
</div> 
</nav> 


</header> 


<main> 
<?php 
if(!empty($page)): 
include $page." .php"; 
» 
<?php else: 5 


«div class="container-fluid p-0"» 
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«div class="site-content"» 
«div class="d-flex justify-content-center"> 
«div class="d-flex flex-column"> 
«hl class="site-title">KitaMau Products Donation«/h1» 
«p class="site-desc"» 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT 
dan diwaktu yang TEPAT 


</p> 
<div class="d-flex flexrow"» 


<input type="button" value-" List Donations" class="btn site-btn1 px-4 py-3 
mr-4 btn-dark" id="listDonation" /> 


<input type="button" value="List Donated" class="btn site-btn2 px-4 py-3 
mr-4 btn-light" id="listDonated" /> 


</div> 
</div> 
</div> 
</div> 


</div> 


<div class="section-1"> 
<div class="container text-center"> 
«hl class="heading-1"»Dibutuhkan Segera«/h1» 
«hl class="heading-2">& Waktu donasi yang hampir habisx/h1» 
«p class="para-1"> 
Inilah daftar donasi-donasi yang sifatnya urgent dan sangat dibutuhkan. 


Dan juga donasi-donasi yang belum tercapai tetapi waktunya hanya tinggal 
sedikit. 
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Ayo semakin banyak yang berdonasi semakin banyak yang terbantu. 
</p> 
«div class="row justify-content-center text-center"> 
<?php 
$dataDonation = get data donation due 3(); 
while($data = mysqli fetch assoc($dataDonation)): 
= 
«div class="col-md-4"> 
«div class="card"» 


<center><img style="height: 200px; width: 320px;" src="1mg/<?php echo 
Sdata['picture'], ?5" alt="Image not loaded" class="card-image-top"></center> 


<div class="card-body"» 
<h4 class="card-title"><?php echo $data['title']; ?></h4> 
<p class="card-text"><?php echo Sdata['description'], ?></p> 


<a href="index.php?page=donation_detail&id=<?php echo $data['id']; 


" 


BT 
«button type="button" class="btn btn-primary"»Lihat 
Kebutuhan«/button» 
</a> 
</div> 
</div> 
</div> 


<?php endwhile; ?> 
</div> 
</div> 


</div> <!-- end div of section 1 --> 
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«div class="section-2"> 
«div class="container-fluid"> 
«div class="d-flex justify-content-end"» 
«div class="d-flex flex-column m-4"> 
«hl class="heading-1"»Share & Prove your Love</h1> 


«p class="para"»Bagikan dan buktikan rasa peduli anda agar semakin banyak 
pendonasi</p> 


<input type="button" value="Share" class="btn btn-danger"» 
</div> 
</div> 
</div> 


</div> 


<div class="section-3"> 
<div class="container"> 


<div class="row"> 


<div class="col-md-4"> 
<div class="d-flex flex-row "5 
<i class="fas fa-user-shield fa-3x m-2"></i> 
<div class="d-flex flex-column"> 
<h3 class="m-2">0+ Instansi</h3> 


<p class="m-2">Sudah lebih dari O instansi terbantu berkat dukungan 
anda sampai Saat ini</p> 


</div> 
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«/div» 
«/div» 
«div class="col-md-4"> 
«div class="d-flex flex-row "5 
<i class="fas fa-user fa-3x m-2"></1> 
«div class="d-flex flex-column'» 
«h3 class="m-2">0+ Individu</h3> 


<p class="m-2">Sudah lebih dari 0 orang terbantu berkat dukungan anda 
sampai saat ini</p> 


</div> 
</div> 


</div> 


<div class="col-md-4"> 
<div class="d-flex flex-row"> 
<i class="fas fa-search fa-3x m-2"></1> 
<div class="d-flex flex-column"> 
<?php 
$dataCount = get_data_count(); 
$dataCount = mysqli_fetch_assoc($dataCount); 
» 
«h3 class="m-2"»«?php echo $dataCount| jumlah'): ?>+ Donors</h3> 


«p class="m-2">Sudah <?php echo $dataCount| jumlah'): 7» menunggu 
uluran tangan anda /p» 


</div> 


</div> 
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</div> 


</div> 
</div> 


</div> 


<div class="section-4 bg-dark"> 
<div class="container"> 
«div class="row"> 

<div class="col-md-7"> 
<img src="css/1mg/fc.jpg" alt="Image" width="590"> 

</div> 

<div class="col-md-5"> 
«hl class="text-white">Bingung mulai dari mana?</h1> 
«a href="index.php?page=carakerjakami">Klik disini untuk panduan</a> 
<p class="para-1"> 


Setelah anda membuat akun anda, anda dapat melihat daftar donasi, yang 
anda dapat berikan sesuai kebutuhan mereka yang anda dapat bantu. 


<br/><br/> 


Anda juga dapat melihat berdasarkan lokasi terdekat dengan anda, donasi 
yang darurat dan yang waktunya hampir habis tetapi belum tercapai. 


</p> 
</div> 
</div> 
</div> 


</div> 
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<?php endif; ?> 
</main> 
<footer> 
<div class="section-5 text-center"> 


«h4 style="margin-top: 5% ;">Dapatkan kabar tentang orang-orang yang membutuhkan 
donasi /h4» 


«h4 class="my-4">Jika anda bersedia /h4» 
«div class="form-inline justify-content-center"> 


«Input type="text" name="email" placeholder="Email" size="40" class="form-control 
px-4 py-2" submit=""> 


<input type="button" value="Get Updates" class="btn btn-danger px-4 py-2" 
onclick="location.href='index.php';"> 


</div> 


«div class="social" style="margin: 5% ;"> 
<div class="d-flex d-flex-row justify-content-center"> 
«1 class="fab fa-facebook-f m-2"></1> 
«1 class="fab fa-twitter m-2"></1> 
<i class="fab fa-instagram m-2"></1> 
<i class="fab fa-youtube m-2"></1> 
</div> 


</div> 


<div class="position-relative"» 


<div class="float-sm-right"> 


<a href="#" class="o-scroll-up static" title="back to top"» 
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«span class="0-scroll-up-text"></span> 
<img class="up" src="1mg/up.png"></img> 
<span class-"o-scroll-up-icon" aria-hidden="true"></span><br> 
</a> 
</div> 


</div> 


<hr/> 


<marquee behavior="" direction=""><h5 style="color: lightgreen">Iya Oke Siyap Team 
&copy; 2019 </h5></marquee> 


</div> 


</footer> 


<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384- 
q8i/X+965DzO0rT 7abK41JStQIAgVgRVzpbzo5smX Kp4Y fRvH+8abtTE1 Pi6jizo" 
crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" 
integrity="sha384- 
WHAIFfRIMFy615SRaxvfOCifBU Oy 1 xHdJ/yoi7 FRNXMRBu5 WHdZYu1hA6ZOblegut" 
crossorigin="anonymous"></script> 


<script src="https://stackpath. bootstrapcdn.com/bootstrap/4.2. 1/js/bootstrap.min.js" 
integrity="sha384- 
BOUglyR+jN6CkvvICOB2joaf51413 gm9GU6Hc1 0g6Ls7i6U/mkkaduKaBhlA Xv9k" 
crossorigin="anonymous "></script> 


<script src="https://unpkg.com/scrollreveal @4.0.5/dist/scrollreveal.js"></script> 
<script src="//code.jquery.com/jquery-1.12.4.js"></script> 
<script src-"//code.jguery.com/u1/1.12.1/Jguery-ui. js" 5 script» 


«script src="js/main.js"></script> 
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<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> 
<script> 
var sr = ScrollReveal({ duration: 1000 }); 
sr.reveal('.site-content .d-flex'); 
sr.reveal('.section-1 .card'); 
sr.reveal('.section-2 .d-flex'); 
sr.reveal('.section-3 .col-md-4)); 
sr.reveal('.section-4 .col-md-7, .col-md-5'); 
</script> 
</body> 
</html> 
<div id="dialog" title="List Donation"> 
<p>Anda ingin melihat daftar donasi?</p> 
</div> 
«div id="dialogDonate" title="List Donasi yang telah selesai"> 
«p» Anda ingin melihat daftar donasi yang telah tercapai? /p» 


</div> 


Full code of style.css 


@import 
url(https://fonts.googleapis.com/css?family=Lato|Pacifico|Righteous|Roboto+Condensed|Ubuntu 
» 


body{ 


padding: 0%; 
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margin: 0%; 


font-family: 'Lato': 


.navbar-brand í 
font-family: 'Pacifico': 
font-size: 35px, 


color: lightcoral important; 


„nav-link( 
font-size: 16px; 
margin: 15px; 
color: black !important; 


font-family: Roboto Condensed’; 


nav-link: hover { 


color: lightgreen !important; 


„active .nav-link( 


color: lightgreen !important; 
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„menu-right-btn( 
padding: 13px 46px; 
margin-right: 4%; 
background-color: transparent; 


transition: all 300ms ease-in; 


.menu-right-btn:hover { 
color: white; 


background-color: lightgreen; 


/* Style main page */ 

.site-content { 
background-image: url(1mg/pexels-1.jpg'); 
background-attachment: fixed; 


background-size: cover; 


„site-title, .site-desc { 
font-style: italic; 
color: white; 
font-family: ‘Righteous’; 


background-color: transparent; 
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.site-title ( 
margin-top: 30%; 
margin-bottom: 6%; 


font-size: 50px; 


.Site-desc { 


font-size: 14px; 


.site-btn 1 { 
margin-left: 20%; 


background-color: black; 


„site-btnl, .site-btn2 { 
margin-top: 5%; 


margin-bottom: 20%; 


/* Section 1 start CSS */ 
.section-1 .heading-1 { 


margin-top: 8%; 
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.section-1 .heading-2 { 
margin-bottom: 5%; 


font-size: 39px; 


.section-1 .para-1 { 
width: 60%; 
margin-left: 20%; 


margin-bottom: 5% 


.section-1 .card-text .para-1 { 
color: rgba(0, 0, 0, 0.59) 


) 


.section- 1 { 


margin-bottom: 8%; 


card { 


width: 20rem; 


/* Section 2 start CSS */ 


.section-2 .container-fluid í 
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background-image: url(‘img/love. jpg’); 
background-size: cover; 


background-attachment: fixed; 


.section-2 .heading-1 { 
margin-top: 20%; 
margin-bottom: 4%; 


font-family: ‘Righteous’; 


.section-2 .para{ 
font-family: ‘Ubuntu’; 


margin-bottom: 7%; 


.section-2 .para, .section-2 .heading-1 { 
color: whitesmoke; 


width: 80%; 


.section-2 .btn{ 
margin-bottom: 15%; 


width: 30%; 
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/“ Section 3 Start CSS */ 
.section-3 { 


margin-top: 6%; 


.section-3 1f 


color: lightgreen: 


.section-3 pí 


color: rgba(0, 0, 0, 0.59): 


/* Section 4 Start CSS */ 
.section-4 í 


margin-top: 890; 


.section-4 .col-md-7, .col-md-5 { 
margin-top: 10%; 


margin-bottom: 10%; 


.section-4 af 
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color: lightgreen; 


font-size: 40px; 


„section-4 .para-1 ( 
color: white; 
font-family: "Roboto Condensed’; 
margin-top: 7%; 


font-size: 22px, 


/* Footer */ 
„social if 
color: green; 


font-size: 20px; 


Full code of getData.php 
<?php 


include "config/koneksi.php"; 


function get data donation due 3()( 
GLOBAL $konek; 
$get data = mysgli query($konek, " 


SELECT 
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FROM t donation 
WHERE 
status — 'onprogress' 


order by due date desc limit 3 


`); 


return $get data; 


function get data count()1 
GLOBAL $konek: 
$get data = mysqli query($konek, " 
SELECT 
count(*) jumlah 
FROMt donation 
WHERE 


status = 'done' 


D; 


return $get data, 


> 
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9.1 Create the website responsive with any device 


In standard resolutions the website may looks good, but when the website is accessed from 
another device, such as mobile browser or tab the website may looks a little messy. 


So let's try to set the website responsiveness. 


Inspect element in browser then set display to iPad Pro 


Donasi Cara Gallery Donatur Hubungi 


(P noduc£ D O4 ration A Kerja Kami Login 


Kami 


kitaMau Products Donation 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT dan diwaktu yang TEPAT 


List Donations List Donated 


We will see our main page in section-4 a little messy 


ngung mulai dari 


So we need to adjust the display 


In style.css add this code in the end of this file 
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/* Adjust Display depends resolutions */ 
@media screen and (max-width: 1024px)( 
img{ 
width: 100%; 


So the section-4 in resolution IPadPro(1024X1366) will be 


: — MERA ] NI 
iPad Pro Y UN Sa: 39% Onlinev S$ 
ó 3 = “It: 


Bingung mulai dari 
mana? 


Setelah anda membuat akun anda, anda 
dapat melihat daftar donasi yang anda 
dapat benkan sesuai kebutuhan mereka 
yang anda dapat bantu. 


Anda juga dapat melihat berdasarkan 
lokasi terdekat dengan anda, donasi yang 
darurat dan yang waktunya hampir habis 
tetapi belum tercapai. 


Dapatkan kabar sertang orang-orang yang membusunkan donasi 


Jika anda bersedia 


fyvoe 
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In Ipad (768 x 1024 ) 


Header 


iPad Y "Ĉe 3 *C. Z 50% Y Online Y 


Product LA MU MLA = 


kitaMau Products Donation 


Berbagi dengan werbe ton sesuva Agpertvon meraka ditempot yong TEPAT dan diwaktu yang TEPAT 


List Donations 


Add this code to style.css 
@ media screen and (max-width: 768px)( 
„site-content1 


width: 767px; 


.section-1 .card{ 


width: 100%; 


.section-1 .card img( 


width: 205px: 


S 
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height: 200px; 


) 


Remove this inline style in index.php file 


$data| 'picture 


class- 


«div class="card-body"» 
«h4 class="card-title"»«?php $data[ 'title']; ?»«/h4» 
«p class="card-text"»«?php $data[ 'description']; ?></p> 
<a href="index.php?page=donation detail&id-« ?php $data['1d']; ?»"» 

«button type="button" class="btn btn-primary"»Lihat Kebutuhan«/button» 

</a> 

</div> 

</div> 
</div> 


So the card div will be 


<div class="col-md-4"> 
<div class-"card"» 
<center><img src="1mg/«?php € $data[ 'picture']; ?» 
"card-image-top"»«/center» 
«div class="card-body"» 
«h4 class="card-title"»«?php $data| 'title']; ?»«/h4» 


alt="Image not loaded" class= 


«p class="card-text"»«?php e€ $data[ 'description']; ?»«/p» 
<a href="index.php?page=donation detail&id-«?php e $data['id']; ?»"» 
«button type="button" class="btn btn-primary"»Lihat Kebutuhan«/button» 
«/a» 
«/div» 
«/div» 
</div> 


Then in style.css add this code 
.section-1 .card img { 
height: 200px; 


width: 320px; 
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Now in iPad ( 768 x 1024 ) the display will be 


iPadY 753 x Tl. 505V Online v 3 


Product Donations 


KitaMau Products Donation 


Berbogi dengan memberikan sesuai kepertuan mereka ditempot yong TEPAT dan diwaktu yang TEPAT 


Dibutuhkan Segera 
& Waktu donasi yang hampir habis 


inah daftar donas -donasi vang s fatrys rgen? san sangat 
dibutLhkan Dan jugs sarasi-zonasi yang 9s um tarcaps 
tatap vacuna Pana: nggal sedikit AVO ser akin banyak 
Yang Seruznas semakin Danh yang tartanto. 


As the example above you can improve the responsiveness of the website, such as in iPhone X ( 


375 x 812 ) resolution, etc 
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66% ¥ Online 


KitaMau Pre 


Dibutuhkan Segera 
& Waktu donasi 


This is just an example code how to handle in iPhone X (372 x 812) 
@ media screen and (max-width: 375px)( 
„site-title,.site-desc( 


width: 4090; 


.site-btn1 ,.site-btn2 { 
margin-left: -20px; 


margin-bottom: 5%; 


.site-title ( 


margin-top: 5%; 
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) 
So the diplay on iPhone X will be 


iPhone X V se 3 sulo 66% Online Y 


n p ` A 
noduc ` SUU f LIWAA 


KitaMau 
Products 
Donation 


Dibutuhkan Segera 


& Waktu donasi 
yang hampir habis 


Inilah daftar donasi-donasi 
yang sifatnya urgent dan 
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10.1 Donation Page 


Create new file named donations.php and write this code 
<?php 

$searchValue = isset(5 GET['search'])?5 GET['search']:”; 
» 
«div class="section-1"> 

«div class="container text-center"> 

«hl class="heading-1">Daftar Donasi</h1> 
<form action="" method="GET"> 
<input type="hidden" name="page" value="donation"> 


<input type="text" name="search" placeholder="Cari Donasi" class="form-control" 
value="<?php echo $searchValue; ?>"> 


</form> 
<p class="para-1"> 


Berikut ini adalah daftar saudara-saudara kita yang memerlukan bantuan dari kita. 
«br/»Ayo bantu mereka. 


</p> 
«div class="row justify-content-center text-center"> 
<?php 
$dataDonation = get_data_donation($searchValue); 
while($data = mysqli_fetch_assoc($dataDonation)): 
» 
«div class="col-md-4"> 


«div class="card"> 
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<img style="height: 200px; width: 320px;" src="img/<?php echo $dataf 'picture'): 
5" alt="Image" class="card-image-top"> 


<div class="card-body"> 
<h4 class="card-title"> 
<?php echo $datal[ title']; ?> 
</h4> 
<p class="card-text"> 
<?php echo Sdata['description'], ?> 
</p> 


<a href="index.php?page=donation_detail&id=<?php echo Sdata['id']: 
?>"><button type="button" class="btn btn-primary">Lihat Kebutuhan</button></a> 


</div> 
</div> 
</div> <!-- end col-md-4 --> 
<?php endwhile; ?> 
</div> 
</div> 


</div> 


> xampp » htdocs » ProductDonations 


Name ` Date modified Type SIZE 
| | admin 2019-02-11 6:41 PM File folder 
| Ï config 2019-02-11 7:51PM File folder 
[ css 2019-02-11 7:22PM File folder 
img 2019-02-11 812PM File folder 
Â js 2019-02-11 739PM File folder 
El donation.php 2019-02-10 7:33 AM PHP File 2 KB 
index.php 2019-02-14 12:44... PHP File 13 KB 


After create the donation.php file, you need add one function to getData.php file 
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function get data donation(Ssearch) ( 
GLOBAL $konek: 
if('empty($search))( 


$paramSearch = " AND title LIKE '%" 


i "04 p 
lelse{ 


"n, 


$paramSearch = " ", 


$get data = mysqli query($konek, " 
SELECT 
* 
FROM t_donation 
WHERE 
status = 'onprogress' 


"SparamSearch." 


return $get data, 
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. Ssearch . "%' OR description LIKE '%" . $search 


function get data count()4 
$konek; 
$get data = mysqli guery($konek, " 
count(”) jumlah 
t donation 


status ' done ' 
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$get data, 


) 


function get data donation($search)4 
$konek; 
( 'empty($search))4 
$paramSearch = " AND title LIKE '%" . $search . "%' OR description LIKE '%" . $search . "%'"; 


jelsef a 


$paramSearch : 
} 


$get data = mysgli guery($konek, 


t donation 


Now access “Donasi” menu or click “List Donations” button 


Product Cara Kerja Kami Gallery Donatur Hubungi Kami Login 


KitaMau Products Donation” 


N 
CA 


| 


Berbagi dengan memberikan sesuai keperluan mereka ditempat yang TEPAT dan diwaktu yang T 
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Then you will see the donation page 


Da ; | | | | 
Product D onation A Home Cara Kerja Kami Gallery Donatur Hubungi Kami Login 


Daftar Donasi 


Cari Donasi 


Berikut ini adalah daftar saudara-saudara kita yang memerlukan bantuan dari kita. 
Ayo bantu mereka. 


Masjid Tua 


Butuh Perbaikan 


SD Ambon 1 Masjid Asy-Syifa Alor 


Masjid Tua 


Butuh Perbaikan 


SD Ambon 1 Masjid Asy-Syifa Alor Korban Banjir Kendal 
Bantu anak-anak SD Ambon 1 Sudah 64 tahun masjid di pelosok NTT Kendal memanggil! Korban banjir butuh 
menuntut ilmu, menggapai mimpi ini berdiri. Sudah 64 tahun pula warga bantuan Anda untuk pulih kembali. 
mereka. Sekolah mereka saat ini rusak bersabar dengan shalat di masjid yang 


dan membutuhkan uluranmu. tak layak. 


Because we have button called “Lihat Kebutuhan” in donation page so we need to create one file 
to show the detail of donation, so create one file named donation detail.php and write this code 


<div class="section-1"> 
<div class="container text-center"> 
<?php 


$id = isset($ GET['d'])?$. GET['id']:”; 
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$dataHeader = get data donation by. id($id): 
$dataHeader = mysqli fetch assoc($dataHeader); 
= 
«hl class="heading-1"> 
<?php 
echo $dataHeader['title']; 
» 
«h4 id="demo"»x/h45 
«/h1» 
«p class="para-1"> 
«php 
echo $dataHeader['description']; 
» 


</p> 


<div class="row justify-content-center text-center"> 

<?php 
$dataDonation = get_data_donors_needs($id); 
if($dataDonation->num_rows == 0){ 

echo "<h3><i style='color: green, Kebutuhan belum dimasukkan...]</i></h3>"; 

} 
while($data = mysqli_fetch_assoc($dataDonation)): 

» 

«div class="col-md-4"> 


«div class="card"> 


Z 


<img style="height: 200px; width: 320px;" src="img/<?php echo $dataf 'picture'): 
?>" alt="Image" class="card-image-top"> 


<div class="card-body"> 
<h4 class="card-title"> 
<?php echo $data['name']; ?> 
</h4> 
<p class="card-text"> 
<?php echo $data['price']; ?> 
</p> 
«p class="card-title"> 
<span class="fa fa-map-marker"> Kota Bau Bau</span> 


</p> 


<?php 
for($i = 0; $i < 5; $i++): 
?> 
<span class="fa fa-star" style="color: yellow;"></span> 
<?php 
endfor; 
» 


(100) 


«p class="card-text-count"» 
«div class="progress"» 


«div class="progress-bar" role="progressbar" style="width: <?php echo 
$data['qty_donated'] / Sdata['qty need'] * 100; 596" aria-valuenow="<?php echo 
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$data['qty_donated']; 25" aria-valuemin="0" aria-valuemax="«?php echo Sdata['qty need'): 
2>"></div> 


</div> 


Terkumpul <?php echo $data['qty. donated'] ?>/<?php echo Sdata['qty need']: 
= 


</p> 


<a href="index.php?page=bantu&id=<?php echo Sdata['tdn id'], ?>"><button 
type="button" class="btn btn-primary">Bantu</button></a> 


</div> 
</div> 
</div> <!-- end col-md-4 --> 
<?php endwhile; ?> 
</div> 
</div> 
</div> 
<script> 
// Set the date we're counting down to 


var countDownDate = new Date("May 5, 2019 15:37:25").getTime(); 


// Update the count down every 1 second 


var x = setInterval(function() ( 


// Get todays date and time 


var now = new Date().getTime(); 


// Find the distance between now and the count down date 
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var distance = countDownDate - now; 


// Time calculations for days, hours, minutes and seconds 

var days = Math.floor(distance / (1000 * 60 * 60 * 24)); 

var hours = Math.floor((distance 96 (1000 * 60 * 60 # 24)) / (1000 * 60 * 60)); 
var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); 


var seconds = Math.floor((distance % (1000 * 60)) / 1000); 


// Output the result in an element with id="demo" 
document.getElementById("demo").innerHTML = "| " + days + " Hari" + hours + "Jam " 


+ minutes + " Menit " + seconds + " Detik "+ "]"; 


// If the count down is over, write some text 
if (distance < 0) { 
clearInterval(x); 
document.getElementB yId("demo").innerHTML = "Donation time is expired"; 
) 
}, 1000); 


</script> 
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After write donation detail.php we need to add some function in getData.php 


function get data donation by id(Sid)( 
GLOBAL $konek; 
$get data = mysqli guery($konek, " 
SELECT 
x 
FROM t donation 
WHERE 
id = '$id' 
DE 


return $get data: 


function get data donors needs($id)/ 

GLOBAL Skonek: 

$get data = mysqli query($konek, " 
SELECT tdn.*,mp.*, tdn.id as tdan id FROM t donation needs tdn 
INNER JOIN m products mp 
ON mp.id = tdn.product id 
WHERE tdn.t donation id = ".$id." 

D; 


return $get data; 
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Click “Lihat Kebutuhan” button and the page will be 


SD Ambon 1 


[ 80 Hari O Jam 50 Menit 16 Detik | 


Bantu anak-anak SD Ambon 1 menuntut ilmu, menggapai mimpi mereka. Sekolah mereka saat 
ini rusak dan membutuhkan uluranmu. 


gapo” 


Buku Tulis SINAR DUNIA / Whiteboard Magnet Spidol Snowman White 
SIDU 10x38 Lembar SAKANA 90 x 180 cm Board Maker 
22400.00 712500.00 8800.00 
@ Kota Bau Bau @ Kota Bau Bau @ Kota Bau Bau 
e de & & & (100) e & & & & (100) sie de & & & (100) 
Terkumpul 0/100 Terkumpul 0/5 Terkumpul 0/30 


Let's create file for “Bantu” button when the button is clicked 


Create file named bantu.php and write this code 


<?php 
$id_tdn = isset($. GET['id'])?5 GET['d']:”; 
$data = get product by needs($id tdn); 
$data = mysgli fetch assoc($data); 
= 
«form action="config/actionPayment.php" method="POST"> 
<div class="container"> 
«div class="row justify-content-center"> 


«div class="paymentCont"> 
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«div class="headingWrap "» 


«h3 class="headingTop text-center">Pilih 
metode pembayaran</h3> 


«p class="text-center"»Masukan jumlah 
yang ingin anda donasikan, kemudian pilih metode pembayaran</p> 


<center><img src="1mg/«?php echo 
Sdata['picture'], ?>"/></center><br/> 


«div class="row justify-content-center"> 
<?php echo Sdata['name'], » @ 


«Input name="qty" type="number" 
class="form-control ml-2 mr-2" min="1" max="<?php echo (Sdata['qty need') - 
$data['qty_donated']); ?>" placeholder="Jumlah" style="width: 1596;" required/> 


X <?php echo Sdata['price']: ?> 


<input type="hidden" 
name="id_tdn" value="<?php echo $id_tdn; ?>"/> 


<input type="hidden" name="price" 
value="<?php echo $datal[ price']; ?5" /> 


<input name="total" type="text" 
readonly class="form-control ml-2" style="width: 20% ;"/> 


</div> 
</div> 
<div class="paymentWrap"> 


<div class="btn-group paymentBtnGroup btn- 
group-justified" data-toggle="buttons"> 


<label class="btn paymentMethod active"> 
<div class="method visa"></div> 
<input type="radio" name="options" 


checked> 
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card"»«/div» 


name="options"» 


name="options"» 


name="options"» 


card"></div> 


name="options"> 


name="options"> 
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</label> 
<label class="btn paymentMethod"> 


<div class="method master- 


«Input type= "radio" 


«/label» 
«label class="btn paymentMethod"> 
«div class="method amex"></div> 


«Input type="radio" 


«/label» 
«label class="btn paymentMethod"> 
«div class="method vishwa"></div> 


<input type="radio" 


</label> 
<label class="btn paymentMethod"> 


<div class="method master- 


<input type="radio" 


</label> 
«label class="btn paymentMethod"> 
<div class="method amex"></div> 


<input type="radio" 


</label> 


«label class="btn paymentMethod"> 


<div class="method vishwa"></div> 


<input type="radio" 
name="options"» 


</label> 
</div> 
</div> 
<div class="footerNavWrap clearfix"> 
<center> 


<button class="btn btn-success pull-right 
btn-fyi">Bantu Sekarang<span class="glyphicon glyphicon-chevron-right"></span></button> 


</center> 
</div> 
</div> 
</div> 
<br/> 
<div class="row justify-content-center"> 
<h1>History donasix/h1» 
<table class="table table-condensed"> 
<tr> 
<th>Nama</th> 
<th>Produk</th> 
<th>Jumlah</th> 
<th>Tanggal</th> 
</tr> 


<?php 
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$dataHistory = get data history by. tdni(Sid tdn); 


while($h = mysqli fetch assoc($dataHistory)): 


= 

<tr> 
<td><?php echo $h['username']; ?></td> 
<td><?php echo Sdata['name']: ?></td> 
<td><?php echo $h['gty']; ?></td> 
<td><?php echo $h['created']; ?></td> 

</tr> 

<?php 
endwhile; 

» 

«/table» 
</div> 
</div> 


</form> 
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Write also some function in getData.php 


function get product by needs($id donation needs) ( 


GLOBAL $konek: 


$get data = mysqli query($konek, 
SELECT * FROMt donation needs tdn 
INNER JOIN m products mp 
ON tdn.product id = mp.id 


WHERE tdn.id = ".Sid donation needs." 


return $get data; 


function get data history by tdni($tdni)( 
GLOBAL $konek: 
$get data = mysqli query($konek, " 
SELECT 
* 
FROM t_donation_history 
WHERE 


t donation needs id = '$tdni' 
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ORDER BY created DESC 


D 


return $get_data; 


Write new css file in css folder named payment_gateway.css and write this code 
.paymentWrap 1 


padding: 50px; 


.paymentWrap .paymentBtnGroup ( 
max-width: 800px; 


margin: auto; 


.paymentWrap .paymentBtnGroup .paymentMethod ( 
padding: 40px; 
box-shadow: none; 


position: relative; 


.paymentWrap .paymentBtnGroup .paymentMethod.active ( 


outline: none !important; 
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.paymentWrap .paymentBtnGroup .paymentMethod.active .method ( 
border-color: #4cd264: 
outline: none !important; 


box-shadow: Opx 3px 22px Opx #7b7b7b; 


.paymentWrap .paymentBtnGroup .paymentMethod .method | 
position: absolute; 
right: 3px; 
top: 3px; 
bottom: 3px; 
left: 3px; 
background-size: contain; 
background-position: center; 
background-repeat: no-repeat; 
border: 2px solid transparent; 


transition: all 0.5s; 


.payment Wrap .paymentBtnGroup .paymentMethod .method.visa { 


background-image: url("img/visa.png"); 
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payment Wrap .paymentBtnGroup .paymentMethod .method.master-card 1 


background-image: url("1mg/mastercard.png"); 


„payment Wrap .paymentBtnGroup .paymentMethod .method.amex | 


background-image: url("img/amex.jpg"); 


„payment Wrap .paymentBtnGroup .paymentMethod .method.vishwa | 


background-image: url("1mg/visa hmb.jpg "): 


.paymentWrap .paymentBtnGroup .paymentMethod .method.ez-cash ( 


background-image: url("css/ezcash.png"); 


„payment Wrap .paymentBtnGroup .paymentMethod .method:hover | 
border-color: #4cd264; 


outline: none !important; 
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Pilih metode pembayaran 
Masukan jumlah yang ingin anda donasikan, kemudian pilih metode pembayaran 


Spidol Snowman White Board Maker @ X 800.00 = 


Jumlah 


= 
al-s = D. EZ 
MasterCard AM < MasterCard AMEX 


bantu Sekarang 


To handle “Bantu Sekarang” button, you need to add actionPayment.php file in config folder 


> xampp » htdocs » ProductDonations » config 


h. 


Name Date modified Type 


B actionPayment.php 2019-02-09 1:09 PM PHP File 
Then write this code 
<?php 


include "koneksi.php"; 
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if lempty($ POST)) { 
$id td  =$ POSTI'id tdn']; 
$qty  -$ POST[qty'; 
$price = $ POST 'price']; 


$total =$ POSTTtotal']; 


// insert into donation history 
$insertHistory = mysqli query($konek, " 


INSERT INTO t donation history VALUES(", 'Anonym', 'Sid td', '$qty', '$price', '$total', 
NOW()); 


D 


Header('Location: ../index.php ?page=terimakasih'); 


= 


Create terimakasih.php in main directory 


> xampp > htdocs > ProductDonations 


Name ° Date modified Type SIZE 

admin 2019-02-11 6:41 PM File folder 

config 2019-02-14 #09PM File folder 

css 2019-02-14 2:53PM File folder 

img 2019-02-11 812PM File folder 

ds 2019-02-11 739PM File folder 

El bantu.php 2019-02-14 2:58 PM PHP File A KE 

El donation.php 2019-02-10 7:33 AM PHP File 2 KB 

E donation detail.php 2019-02-10 7:14AM PHP File 4 KE 
index.php 2019-02-14 12:44... PHP File 13 KB 


2019-02-09 7:24PM” PHP File 1 KB 


92 


Then write this code 


«center» 


«hl style="color: green;"><b>Terimakasih!!!</b></h1> 


<h5 style="color: pink;"> 


<b>Bantuan dari anda akan segera diverifikasi dan diproses untuk sampai ketangan yang 
membutuhkan :)</b> 


</h5> 
<br/> 
<h3> Sebarkan Donasi Ini <h3> 


ca class="btn-floating btn-lg btn-fb" type="button" role="button"><i class="fab fa- 
facebook-f"></1></a> 


ca class="btn-floating btn-lg btn-tw" type="button" role="button"><i class="fab fa- 
twitter ></1></a> 


«a class="btn-floating btn-lg btn-li" type="button" role="button"><i class="fab fa-linkedin- 
in 5 Yi» Ya» 


«a class="btn-floating btn-lg btn-ins" type="button" role="button"><i class="fab fa- 
instagram"></1></a><br><br> 


<img src="1mg/terimakasih.jpeg" style="width: 40%; height: 2096" alt="Thank You :)"> 
<br><br> 


</center> 


After you write the code and you click “Bantu Sekarang” button you will redirect to this page 
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ProduckD onations 


Donasi Cara Kerja Kami Gallery 


Terimakasih!!! 


Sebarkan Donasi Ini 


KIEICIC 


Donatur 


Hubungi Kami 


Login 


11.1 Cara Kerja Kami page 


Create file named carakerjakami.php and write this code 
<center> 
«div class="container-fluid"> 
<div class="row"» 
<div class="col-sm-4"> 
<img src="1mg/dluarbiasa.jpg" width=75% height=75%> 
</div> 
<div class="col-sm-8"> 
<br><br> 
<h2><strong>Untuk kamu para donatur yang luar biasa</strong></h2> 


<h4>Kamu bisa memilih sendiri barang apa yang ingin kamu donasikan sesuai kebutuhan 
yang ada. 


Sehingga kamu tahu wujud nyata dari uang donasimu.</h4> 


</div><br><br> 


<div class="col-sm-4"> 

<img src="1mg/decommerce.Jpg" width=80% height=80% > 
</div> 
<div class="col-sm-8"> 
<br><br> 
<h2><strong>Berdonasi semudah belanja online!</strong></h2> 

«h45Pilih bidang yang ingin kamu bantu.Beli Produk sesuai kebutuhan mereka. 

Kirim dan dapatkan laporannya langsung. Selesai, terima kasih kamu luar biasa! /p» 


</div><br><br> 
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«div class="col-sm-4"><br><br> 
<img src="1mg/dngo.jpg" width=70% height=7090» 
</div> 
<div class="col-sm-8"> 
<br><br><br> 
<h2><strong>Untuk kamu para penggerak NGO</strong></h2> 


<h4>Kamu bisa memanfaatkan platform ini untuk meningkatkan kredibilitas lembaga dan 
memudahkan laporan donasi. 


Sehingga kamu bisa fokus untuk membantu lebih banyak orang lagi. 
</h4> 
</div> 
</div> 
</div> 


</center> 


De ; A A a 
P voduck D OMA Home Donasi Gallery Donatur Hubungi Kami Login 


Untuk kamu para donatur yang luar biasa 


Kamu bisa memilih sendiri barang apa yang ingin kamu donasikan sesuai kebutuhan 
yang ada. Sehingga kamu tahu wujud nyata dari uang donasimu. 


Berdonasi semudah belanja online! 


Pilih bidang yang ingin kamu bantu.Beli Produk sesuai kebutuhan mereka. Kirim 
dan dapatkan laporannya langsung. Selesai, terima kasih kamu luar biasa! 
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12.1 Gallery page 


Create gallery.php file and write this code 


«div id="carousel-example-2" class="carousel slide carousel-fade z-depth-1-half" data- 
ride="carousel"> 


<ol class="carousel-indicators"> 
<li data-target="#carousel-example-2" data-slide-to="0" class="active"></li> 
«li data-target="#carousel-example-2" data-slide-to="1"></li> 
<li data-target="#carousel-example-2" data-slide-to="2"></li> 
</ol> 
<div class-"carousel-inner" role="listbox"» 
<div class="carousel-item active"» 
<div class-" view » 
<img class="d-block w-100" src-"img/banjir.jpg" alt-" Korban Banjir Sumbawa - NTB"> 
«div class="mask rgba-black-light"></div> 
</div> 
<div class="carousel-caption"> 
«h3 class="h3-responsive"»Bantuan Korban Banjir Sumbawa - NTB</h3> 
«p»Bahan makanan dan peralatan dapur sudah tersalurkan «/p» 
</div> 
</div> 
<div class="carousel-item"> 
<div class="view'» 
<img class="d-block w-100" src="1mg/sekolah. jpg" alt="Second slide"> 


<div class="mask rgba-black-light"></div> 
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</div> 
«div class="carousel-caption"> 
«h3 class="h3-responsive"»Renovasi sekolah di Palu pasca Gempa</h3> 
<p>Donasi telah tersalurkan untuk pembangunan kembali sekolah yang rusak</p> 
</div> 
</div> 
<div class="carousel-item"> 
<div class="view"> 
<img class="d-block w-100" src="1mg/masyjid.jpg" alt="Third slide"> 
<div class="mask rgba-black-light"></div> 
</div> 
<div class="carousel-caption"> 
«h3 class="h3-responsive"»Pembangunan kembali Masjid di Lombok yang Rusak</h3> 


<p>Sumbangan dari pengguna telah disalurkan untuk pembangunan kembali Masjid 
Baitullah </p> 


</div> 
</div> 
</div> 
<a class="carousel-control-prev" href="#carousel-example-2" role="button" data-slide- "prev "5 
<span class="carousel-control-prev-icon" aria-hidden="true"></span> 
<span class="sr-only">Previous</span> 
</a> 
<a class="carousel-control-next" href="#carousel-example-2" role="button" data-slide="next"> 
<span class="carousel-control-next-icon" aria-hidden="true"></span> 


<span class="sr-only">Next</span> 
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</a> 


</div> 


Produck D OH at LOMA Home Donasi Cara Kerja Kami Donatur Hubungi Kami Login 


BANTUAN KEMANUSIAAN 
` BANJIR KABUPATEN SUMBAWA - NTB 


A A 


13.1 Donatur page 


Create file named donated.php and write this code 


«div class="card mb-3" style="width: 100% ;"> 
<div class="card-header"> 
<i class="fas fa-table"></1> 
Report Donation</div> 
<div class="card-body"> 
<div class="table-responsive"» 
«table class="table table-bordered" 1d-"history All" width="100%" cellspacing="0"> 


<thead> 
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<tr> 
<th>Nama</th> 
<th>Produk</th> 
<th>Jumlah</th> 
<th>Tanggal</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th>Nama</th> 
<th>Produk</th> 
<th>Jumlah</th> 
<th>Tanggal</th> 
</tr> 
</tfoot> 
<tbody> 
<?php 
$dataHistory = get data all history(); 
while($h = mysqli. fetch assoc($dataHistory)): 
= 
<tr> 
<td><?php echo Sh['username'], ?></td> 
<td><?php echo $h['name']; ?></td> 
<td><?php echo Sh['gty'], ?></td> 


<td><?php echo $h['created']; ?></td> 
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</tr> 
<?php 
endwhile; 
» 
</tbody> 
</table> 
</div> 
</div> 


<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 


<style> 
.dataTables_filter{ 


margin-right: 1%; 


.dataTables length, .dataTables infof 


margin-left: 1%; 


</style> 
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Then add this function in getData.php 


function get data all history) 

GLOBAL $konek: 

$get data = mysqli query($konek, " 
SELECT * FROM t donation history a 
INNER JOIN t donation needs b 
ON a.t donation needs id = b.id 
INNER JOIN m products c 
ON c.id = b.product id 


D; 


return $get data; 


P 0 2 í Jon at LOMA Home Donasi Cara Kerja Kami Gallery Hubungi Kami Login 


EB Report Donation 
Show| 10 " lentries Search: [ 
Nama * Produk Jumlah Tanggal 
Anonym Spidol Snowman White Board Maker 1 2019-02-14 15:09:20 
Nama Produk Jumlah Tanggal 
Showing 1to1of 1 entries Previous =. Next 
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14.1 Hubungi kami page 


Create contact us.php and write this code 


«div class-"container contact-form"» 

«div class="contact-image"> 

<img src="https://image.ibb.co/kUagtU/rocket_contact.png" alt-"rocket contact" 
</div> 
<form method="post"> 

<h3>Hubungi Kami</h3> 

<div class="row"> 

<div class="col-md-6"> 
<div class="form-group"> 


<input type="text" name="txtName" class="form-control" placeholder="Nama 
Anda *" value="" /> 


</div> 
<div class="form-group"» 


<input type="text" name="txtEmail" class="form-control" placeholder="Email 
Anda *" value="" /> 


</div> 
<div class- "form-group "5 


<input type="text" name- "txtPhone" class="form-control" placeholder- "No 
Telepon Anda *" value="" /5 


</div> 
<div class="form-group"> 


<input type="submit" name="btnSubmit" class="btnContact" value="Kirim 
Pesan" /> 
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«/div» 

</div> 

<div class="col-md-6"> 
<div class="form-group"» 


<textarea name="txtMsg" class="form-control" placeholder="Pesan Anda 5" 
style="width: 100%; height: 150px;"»«/textarea» 


</div> 
</div> 
</div> 
</form> 


</div> 
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CHAPTER 3: Admin Panel 


In this part we will implement Admin template from bootstrap for administrator to provide data 


of our application 


Okay lets start with downloading the template in this link 
https://startbootstrap.com/templates/sb-admin/ 


H) startbootstrap-sb-....zip A 


275.5 MB, 11 secs left 


Extract to Admin folder in our project, so the admin folder will be 


> xampp » htdocs » ProductDonations 


os 


Name Date medified Type Size 
[ls 2019-01-31 545PM File folder 

lis 2019-01-31 545PM File folder 

Nl sess 2019-01-31 545PM File folder 

[] vendor 2019-01-31 5:45PM  Filefolder 

E .gitignore 2019-01-31 5:45 PM Text Document 

[1 trawis.ym] 2019-01-31 5:45 PM YML File 

Q 404.html 2019-01-31 5:45 PM Opera Web Docu... 

O blank.html 2019-01-31 5:45 PM Opera Web Docu... 

O charts.html 2019-01-31 545PM Opera Web Docu... 


O forgot-password.html 
*2 qulpfile.js 


O index.html 2019-01-31 3:45PM Opera Web Docu... 
| | LICENSE 2019-01-31 5:45PM File 

O login.html 2019-01-31 545PM Opera Web Docu... 
E] package.json 2019-01-31 5:45PM JSON File 

E] package-lock.json 2019-01-31 545PM JSON File 

l README.md 2019-01-31 545PM MD File 


O register.html 


2019-01-31 5:45 PM 
2019-01-31 5:45 PM 


2019-01-31 5:45 PM 


Opera Web Docu... 


JavaScript File 


Opera Web Docu... 


1 KB 
1 KB 
3 KB 
3 KB 
9 KB 
2 KB 
4 KB 
28 KB 
2 KB 
3 KB 
2 KB 
261 KB 
5 KB 
4 KB 


O tables.html 


2019-01-31 5:45 PM 


Opera Web Docu... 


25 KB | 
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If we access admin with this url 


http://localhost/ProductDonations/admin/ 


Start Bootstrap = 


Dashboard 
@ Dashboar Dashboard / Overview 


26 New Messages! ew Tasks! 123 New Orders! 13 New Tickets! 


View Details View Detail > View Details View Details 


laa Area Chart Example 


40000 
e 


D —. 
= > a 
À / NUN a 


10000 @ 


Now lets try to customize the template with our code 
Rename index.html to index.php Change code in admin/index.php with this code 
<?php 


include "../config/koneksi.php"; 


session_start(); 

if(!empty($_SESSION['username’])) ( 
$username = 5 SESSION['username']; 
$user id = $ SESSIONJ user id']: 
$role  =$ SESSIONT[role']; 

lelsef 
Header( Location: login.php”): 

) 
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"nn 


$bradcrumb = $page = ""; 
if( lempty($ GET['page']))( 

$bradcrumb = $page = $ GET['page']; 
lelsef 


$bradcrumb = "Overview"; 


$page = "totaldonation"; 
) 
» 
<!DOCTYPE html» 


<html lang="en"> 


<head> 


<meta charset="utf-8"> 

<meta http-equiv="X-UA-Compatible" content="IE=edge"» 

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
«meta name="description" content=""> 


ene 


<meta name="author" content=""> 


<title>Admin Product Donation</title> 


«link rel='shortcut icon’ type-'image/x-icon' href-'../favicon.ico' /> 


<!-- Custom fonts for this template--> 


<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> 


<!-- Page level plugin CSS--> 
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«link href="vendor/datatables/dataTables.bootstrap4.css" rel="stylesheet"> 


<!-- Custom styles for this template--> 


«link href="css/sb-admin.css" rel="stylesheet'» 


«!-- Bootstrap core JavaScript--» 
«script src="vendor/Jquery/Jquery.min.js"~«/script» 


«script src-" vendor/bootstrap/js/bootstrap.bundle.min.js" script» 


«!-- Core plugin JavaScript--» 


«script src-" vendor/jguery-easing/Jjguery.easing.min.js" 5 script» 


«!-- Page level plugin JavaScript--» 
«script src="vendor/chart.js/Chart.min.js"></script> 
«script src="vendor/datatables/jquery.dataTables.js"></script> 


«script src="vendor/datatables/dataTables.bootstrap4.js"»«x/script= 


«!-- Custom scripts for all pages--» 


«script src="Js/sb-admin.min.js"»«/script= 


«!-- Demo scripts for this page--» 
«script src="js/demo/datatables-demo.js"></script> 


«script src="js/demo/chart-area-demo. js"></script> 
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</head> 


<body id="page-top"> 


«nav class="navbar navbar-expand navbar-dark bg-dark static-top"» 


<a class="navbar-brand mr-1" href="index.php">Product Donation</a> 


«button class="btn btn-link btn-sm text-white order-1 order-sm-0" 1d="sidebarToggle" 
href="#"> 


<i class="fas fa-bars"></1> 


</button> 


<!-- Navbar Search --> 
<form class="d-none d-md-inline-block form-inline ml-auto mr-0 mr-md-3 my-2 my-md-0"» 
<div class="input-group"> 


<input type="text" class="form-control" placeholder="Search for..." aria-label="Search" 
aria-describedby="basic-addon2"> 


<div class="input-group-append"> 
<button class="btn btn-primary" type="button"> 
<i class="fas fa-search"></1> 
</button> 
</div> 
</div> 


</form> 
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<!-- Navbar --» 
«ul class="navbar-nav ml-auto ml-md-0"» 
«li class="nav-item dropdown no-arrow mx-1"> 


<a class="nav-link dropdown-toggle" href="#" id="alertsDropdown" role="button" data- 
toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 


<i class="fas fa-bell fa-fw"></1> 
«span class="badge badge-danger">9+</span> 
«/a» 
«div class="dropdown-menu dropdown-menu-right" aria-labelledby="alertsDropdown"» 
«a class="dropdown-item" href="#">Action</a> 
«a class="dropdown-item" href="#">Another action</a> 
«div class="dropdown-divider"></div> 
«a class="dropdown-item" href="#">Something else here</a> 
</div> 
</li> 
<li class="nav-item dropdown no-arrow mx-1 "> 


<a class="nav-link dropdown-toggle" href="#" 1d-"messagesDropdown" role="button" 
data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 


<i class="fas fa-envelope fa-fw"></1> 
«span class="badge badge-danger">7</span> 
</a> 


<div class="dropdown-menu dropdown-menu-right" aria- 
labelledby="messagesDropdown'» 


«a class="dropdown-item" href="#">Action</a> 
«a class="dropdown-item" href="#">Another action</a> 


«div class="dropdown-divider"></div> 
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«a class="dropdown-item" href="#">Something else here</a> 
«/div» 
</li> 
<li class="nav-item dropdown no-arrow"» 


<a class="nav-link dropdown-toggle" href="#" id="userDropdown" role="button" data- 
toggle- "dropdown" aria-haspopup="true" aria-expanded="false"» 


<i class="fas fa-user-circle fa-fw"></1> 
«/a» 
«div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown"» 
«a class="dropdown-item" href="#">Settings</a> 
«a class="dropdown-item" href—"#"5 Activity Log</a> 
«div class="dropdown-divider"></div> 


«a class="dropdown-item" href—"#" data-toggle="modal" data- 
target="#logoutModal">Logout</a> 


</div> 
</li> 
</ul> 


</nav> 


<div id="wrapper'> 
<!-- Sidebar --> 
«ul class="sidebar navbar-nav"» 
«li class="nav-item active"» 
«a class="nav-link" href="index.php"> 
<1 class="fas fa-fw fa-tachometer-alt"></1> 


<span>Dashboard</span> 
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</a> 
</li> 
<li class="nav-item dropdown"> 


<a class="nav-link dropdown-toggle" href="#" id="pagesDropdown" role="button" data- 
toggle="dropdown" aria-haspopup="true" aria-expanded="false"> 


<i class="fas fa-fw fa-folder"></1> 
<span>Menu</span> 
</a> 
<div class="dropdown-menu" aria-labelledby="pagesDropdown"> 
<?php 
if($role == 2): 
» 
«h6 class="dropdown-header">NGO:</h6> 
«a class="dropdown-item" href="index.php?page=donation"»Donationsx/a» 
«a class="dropdown-item" href="1ndex.php?page=gallery">Gallery</a> 
<?php 
else: 
12 
«h6 class="dropdown-header">Admin:</h6> 
«a class="dropdown-item" href="1ndex.php?page=product">Product</a> 
«a class- "dropdown-item" href="index.php?page=user">User</a> 
<?php endif; ?> 
</li> 
<li class="nav-item"> 


<a class="nav-link" href="index.php?page=laporan"> 
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<i class="fas fa-fw fa-chart-area"></1> 
<span>Laporan</span></a> 
</li> 


</ul> 


<div id="content-wrapper"> 


«div class="container-fluid"> 


<!-- Breadcrumbs--> 
<ol class="breadcrumb"> 
<li class="breadcrumb-item"> 
<a href="index.php">Dashboard</a> 
</li> 
<li class="breadcrumb-item active"><?php echo $bradcrumb; ?></li> 


</ol> 
<?php 
include $page." .php"; 


= 


</div> 


«!-- /.container-fluid --> 


«!-- Sticky Footer --» 
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«footer class="sticky-footer'» 
«div class-"container my-auto"» 
«div class="copyright text-center my-auto"» 
«span» Copyright © Oke Iya Siyap 2019</span> 
«/div» 
</div> 


</footer> 


</div> 


<!-- /.content-wrapper --> 


</div> 


<!-- /#wrapper --> 


<!-- Scroll to Top Button--> 
<a class="scroll-to-top rounded" href="#page-top"> 
<i class="fas fa-angle-up"></1> 


</a> 


<!-- Logout Modal--> 


<div class="modal fade" id="logoutModal" tabindex="-1" role="dialog" aria- 
labelledby= "exampleModalL abel" aria-hidden="true"> 


<div class="modal-dialog" role="document"> 
<div class="modal-content"> 


<div class="modal-header"> 
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«h5 class="modal-title" 1d="exampleModalLabel">Ready to Leave?</h5> 


«button class="close" type="button" data-dismiss-" modal" aria-label="Close"> 


«span aria-hidden="true"»x«/span» 


«/button» 


</div> 


<div class="modal-body">Select "Logout" below if you are ready to end your current 


session.</div> 


<div class="modal-footer"> 


<button class="btn btn-secondary" type="button" data- 


dismiss="modal">Cancel</button> 


<a class="btn btn-primary" href="login.php">Logout</a> 


</div> 
</div> 
</div> 
</div> 
</body> 
</html> 


So the admin main page will be 


Product Donation = 


@B Dashboard 
Dashboard 


Copyright © Oke Iya Siyap 2019 
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Okay, now we are going to create login page for our admin, so create file named login.php in 


admin folder 


| xampp > htdocs > ProductDonations [admin > | 


Name 


F index. html 


„gitignore 

i travis.yml 

O 404.html 

O blank.html 

O charts.html 

O forgot-password.html 


>. qulpfile.js 

| ] LICENSE 

O login.html 
a package.json 
E] package-lock.json 
l README.md 
O register.html 
O tables.htm! 
Ld C55 

ld E 

[d 5055 


Li vendor 


Then write this code 

<?php 
session_start(); 
session destroy(); 

» 

<!DOCTYPE html> 

«html lang="en"> 


«head» 
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Date modified 


2019-02-15 7:02 PM 
2019-02-09 5:22 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 


Type 


Opera Web Docu... 


PHP File 
Text Document 
YML File 


Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 


JavaScript File 
File 


Opera Web Docu... 


JSON File 
JSON File 
MD File 


Opera Web Docu... 
Opera Web Docu... 


File folder 
File folder 
File folder 
File folder 


Size 


9 KB 


1 KB 
1 KB 
8 KB 
8 KB 
9 KB 
2 KB 
4 KB 
2 KB 
3 KB 
2 KB 
261 KB 
5 KB 
4 KB 
25 KB 


«meta charset="utf-8"> 

«meta http-equiv="X-UA-Compatible" content="IE=edge"» 

«meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 
<meta name-"description" content=""» 


<meta name="author" content=""> 


<title>SB Admin - Login</title> 


<!-- Custom fonts for this template--> 


<link href="vendor/fontawesome-free/css/all.min.css" rel="stylesheet" type="text/css"> 


<!-- Custom styles for this template--> 


<link href="css/sb-admin.css" rel="stylesheet"> 


</head> 
<body class="bg-dark"> 
<div class="container"> 
<div class="card card-login mx-auto mt-5"> 
<div class="card-header">Login</div> 
<div class="card-body'"> 
<form action="php/action_login.php" method="POST"> 
<?php 
if(isset($ SESSION['msg'])): 
= 


«div style="margin-bottom: 5% ;"> 
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<?php echo 5 SESSION['msg']; 5 
«/div» 
<?php endif;?> 
<div class="form-group"> 
<div class="form-label-group"» 


<input type="text" id="inputText" class="form-control" placeholder="Username" 
required- "required" autofocus="autofocus" name="username"> 


«label for="inputText">Username</label> 
«/div» 
«/div» 
«div class="form-group"> 
«div class="form-label-group"> 


<input type="password" id="inputPassword" class="form-control" 
placeholder="Password" required="required" name="password"> 


«label for="inputPassword">Password</label> 
«/diw 
</div> 
«button class="btn btn-primary btn-block" type="submit">Login</button> 
</form> 
</div> 
</div> 


</div> 


<!-- Bootstrap core JavaScript--> 
<script sre="vendor/jquery/jquery.min.js "></script> 


«script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script> 
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«!-- Core plugin JavaScript--> 


<script src-" vendor/jguery-easing/jguery.easing.min.js script» 


</body> 


</html> 


After login form, we need to create the action of login 


So create php folder in admin main page 


> xampp > htdocs > ProductDonations > admin > 


Name ^ Date modified Type SIZE 

Dl css 2019-01-31 5:45PM File folder 

H js 2019-01-31 545PM File folder 

| 2019-02-15 7:07PM File folder 

| scss 2019-01-31 545PM File folder 

N vendor 2019-01-31 545PM File folder 

gitignore 2019-01-31 345 PM Text Document 1 KB 
i travis.yml 2019-01-31 545PM YML File 1 KB 
O 404.html 2019-01-31 545PM Opera Web Docu... 8 KB 
Oo blank.html 2019-01-31 545PM Opera Web Docu... 8 KB 
O charts.html 2019-01-31 545PM Opera Web Docu... 9 KB 
O forgot-password.html 2019-01-31 545PM Opera Web Docu... 2 KB 
7. qulpfile.js 2019-01-31 545PM JavaScript File 4 KB 
O index.html 2019-02-15 '02PM Opera Web Docu... 9 KB 
N LICENSE 2019-01-31 5:45PM File 2 KB 
O login.html 2019-01-31 5:45 PM Opera Web Docu... 3 KB 
s login.php 2019-02-09 5:22 PM PHP File 3 KB 
a package,json 2019-01-31 %45PM JSON File 2 KB 
É | package-lock.json 2019-01-31 545PM JSON File 261 KB 
= README.md 2019-01-31 5:44 PM MD File 5 KB 
O register.html 2019-01-31 5:45PM Opera Web Docu... 4 KB 
O tables.html 2019-01-31 545PM Opera Web Docu... 25 KB 
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Then create file named action login.php in admin/php folder 


> xampp > htdocs > ProductDonations > admin +f php 
Name Date modified Type SIZE 


2019-02-09 5:17PM PHP File 2 KB 


And write this code 
<?php 
session start(); 


include "../../config/koneks1.php"; 


$username = strtolower($_POST['username']); 
$password = $ POSTI 'password'): 


// print r(password hash($password, PASSWORD DEFAULT)) exit; 


if( 'empty(Susername)) í 


$get user data - mysqli query(Skonek, "SELECT # FROM m user WHERE 
LOWER (username) = '$username' LIMIT 1"); 


$data - mysgli fetch assoc($get user data), 
if($username == strtolower($data['username']))1 
if(password. verify($password, $data['password']))( 
unset($ SESSION['msg']); 
// daftarkan data user di session 
$ SESSIONJ user id'] = Sdata['id']: 
$ SESSION['username'] = $data['username']; 


$ SESSIONJ role') = Sdata['role']: 
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Header( Location: ../index.php'); 
die: 
lelsef 
// error password 
$ SESSION['msg'] = Invalid Username or Password, Please Try Again’; 
Header('Location: ../login.php'); 


die; 


$ SESSION['msg'] = 'Invalid Username or Password, Please Try Again'; 


Header('Location: ../login.php”): 


die; 


= 


If you access login page with this url http://localhost/ProductDonations/admin/login.php 


Login 


Username 


Password 
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Now we can login using username and password that exists in database 
Currently you can use 


Username: admin,ngo 


Password: admin,ngo 


@ Dashboard 


Dashboard 


Warning: include(totaldonation.php): failed to open stream: No such file or directory in G:\xampp\htdocs\ProductDonations\admin\index.php on line 
176 


Warning: include(): Failed opening 'totaldonation.php' for inclusion (include path='GAxamppiphpiPEAR) in 
G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 


Copyright © Oke Iya Siyap 2019 


After login we are going to create simple dashboard for our admin page 


Create totaldonation.php file in admin folder 


» xampp » htdocs » ProductDonations » admin » 
Name Date modified Type Size 


El index.php 2019-02-15 7:02 PM PHP File 9 KB 


EJ totaldonation.php 2019-02-10 6:22AM PHP File 3 KB 
P File 


login.php 2019-02-09 5:22 PN PH 


=| .gitignore 2019-01-31 5:45PM Text Document | KB 
| | .travis.yml 2019-01-31 545PM YML File KB 


© 404.htmi 2019-01-31 5:45PM Opera Web Docu... 3 KE 
O biank.htmi 2019-01-31 5:45PM Opera Web Docu... 8 KB 
O charts.htmi 2019-01-31 5:45PM Opera Web Docu... 9 KB 
O forgot-password.html 2019-01-31 5:45PM Opera Web Docu... 2 KB 


gulpfile.js 2019- 1-31 5:45 PM JavaSci pt File 4 KB 
| LICENSE 2019-01-31 545PM File 2 KB 
O login.html 2019-01-31 5:45 PM Opera Web Docu... 3 KB 


I package.json 2019-01-31 5:45 PM JSON File 2 KB 
_ | package-lock.json 2 45PM JSON File 261 KB 


| README.md 2019-01-31 5:45PM MD File 5 KE 
QO register.htmi 2019-01-31 5:45PM Opera Web Docu 4KB 
O tables.htmi 2019-01-31 5:45PM Opera Web Docu 25 KB 
à php 2019-02-15 7:07 PM File folder 
H css 2019-01-31 5:45 PM File folder 
f is 2019-01-31 5:45PM File folder 
| Ï sess 2019-01-31 545PM File folder 


` | vendor 2019-01-31 5:45PM File folde: 
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Then write this code 
«!-- Icon Cards--» 
«div class=""> 
«div class="col-xl- 12 col-sm-12 mb-3"> 
«div class="card text-white bg-success o-hidden h-100"> 
«div class="card-body"» 
«div class="card-body-icon'» 
<i class="fas fa-fw fa-shopping-cart"></1> 
«/div» 
<?php 
$dataCount = mysqli_query($konek, " 
SELECT 
count(*) jumlah 
FROM t_donation_history 
D; 
$dataCount = mysqli fetch assoc($dataCount); 
= 
«div class="mr-5"><?php echo $dataCount| jumlah'): ?> Total Donatur</div> 
«/div» 
«/div» 


</div> 


<div class="card mb-3"> 
<div class="card-header"> 


<1 class="fas fa-table"></1> 
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Data Donasi</div> 
«div class="card-body"» 
«div class="table-responsive"» 
«table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 
«thead» 
<tr> 
<th>Nama</th> 
<th>Produk</th> 
<th>Jumlah</th> 
<th>Tanggal</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th>Nama</th> 
<th>Produk</th> 
<th>Jumlah</th> 
<th>Tanggal</th> 
</tr> 
</tfoot> 
<tbody> 
<?php 
$getDonasi = mysqli_query($konek, " 
SELECT * FROM t_donation_history a 


INNER JOIN t_donation_needs b 
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ON a.t donation needs id = b.id 
INNER JOIN m products c 
ON c.id = b.product id 


Ü 


while($data = mysgli fetch assoc($getDonasi)): 


= 
<tr> 
<td><?php echo $data['username']; ?></td> 
<td><?php echo $data['name']; ?></td> 
<td><?php echo $data['qty']; ?></td> 
<td><?php echo $data['created']; ?></td> 
</tr> 
<?php endwhile; 5 
</tbody> 
</table> 
</div> 


</div> 


<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 


</div> 
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Access url http://localhost/ProductDonations/admin 


And the interface will be 


Product Donation £ Search for. Q a = O 


@ Dashboard 


Dashboard / Overview 


1 Total Donatur 


EB Data Donasi 


Show 10 +$ entries Search: 
Nama |.” Produk Jumlah Tanggal 
Anonym Spidol Snowman White Board Maker 1 2019-02-14 15:09:20 
Nama Produk Jumlah Tanggal 


Showing 1 to 1 of 1 entries Previous N 


Product Donation = 


Dashboard 
@ Dashboar Dashboard / product 


Bu Menu 


Warning: include(product.php): failed to open stream: No such file or directory in G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 


Admin: 


Warning: include(): Failed opening 'product.php' for inclusion (include_path='G:\xampp\php\PEAR’) in 


7 G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 
ser 
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We are going to create master product, create product.php 


» xampp > htdocs > ProductDonations > 


Ma me 


< index.php 


login.php 


=| .gitignore 
(1 travis.yml 
O 404.html 
© blank.html 
O charts.html 


O forgot-password.html 


™, gulpfile.js 

| ] LICENSE 

O login.html 
3 package. json 


E) package-lock.json 


“| README.md 
oO register.html 
O tables.html 
Í php 

Ld css 

His 

LI 5C55 


[1 vendor 


Write this code 


<?php 


include "../config/koneksi.php"; 


Ei totaldonation.php 


| g product.php 


Date — 


2019-02-15 7:02 PM 
2019-02-10 6:22 AM 
2019-02-10 247 AM 
2019-02-09 5:22 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 %45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 %45 PM 
2019-02-15 7:07 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 


$action = isset($ GET['action'])?5 GET['action']:”; 


if($action == "): 


= 


Type 


PHP File 
PHP File 
PHP File 
PHP File 
Text Document 
YML File 


Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 


Opera Web Docu... 


JavaScript File 
File 


Opera Web Decu... 


JSON File 
JSON File 
MD File 


Opera Web Docu... 


Opera Web Docu... 


File folder 
File folder 
File folder 
File folder 
File folder 


Size 


9 KB 


4 KB 
3 KB 
1 KB 
1 KB 
8 KB 
8 KB 
9 KB 
2 KB 
4 KB 
2 KB 
3 KB 
2 KB 
261 KB 
5 KB 
4 KB 
25 KB 


«a href="index.php?page=product&action=add"><button class="btn btn-primary mb-2" 
style="margin-left: 89% ;">Tambah Produk</button></a> 
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«div class="card mb-3"> 
<div class="card-header"><i class="fas fa-table"></1>Product</div> 
<div class="card-body"» 
«div class="table-responsive"> 
<table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 
<thead> 
<tr> 
<th>Nama Produk</th> 
<th>Picture</th> 
<th>Price</th> 
</tr> 
</thead> 
<tfoot> 
<tr> 
<th>Nama Produk</th> 
<th>Picture</th> 
<th>Price</th> 
</tr> 
</tfoot> 
<tbody> 
<?php 
$dataHistory = mysqli_query($konek, " 
SELECT * FROM m_products 
D; 
While($h = mysqli_fetch_assoc($dataHistory)): 
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= 
<tr> 
<td><?php echo $h['name']; ?></td> 


<td><img src="../img/<?php echo Sh['picture'], ?>" alt="Image not loaded" 
class="card-image-top"></td> 


<td><?php echo $h['price']; ?></td> 
</tr> 
<?php 
endwhile; 
» 
</tbody> 
</table> 
</div> 
</div> 
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 
<?php 
elseif($action == 'add)): 
12 
«div class="panel panel-default "> 
«div class="card mb-3"> 
«div class="card-header"><i class="fas fa-table"></1>Produk</div> 
«div class="card-body"» 
«form action="php/product.php" method="POST" enctype="multipart/form-data"» 
<h3>Tambah Product</h3> 


<a href="1ndex.php?page=product"><button type="button" class="btn btn-danger" 
style="width: 50%; float: right;">Batal</button></a> 
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«button type="submit" class="btn btn-primary" style="width: 
50% ;">Simpan</button> 


<hr/> 


<label>Nama Produk</label> 


<input type="text" class="form-control" placeholder="Nama Produk" name="name" 
required /> 


<label>Gambar</label> 


<input type="file" name="picture" class="form-control" required” 


<label>Harga</label> 


<input type="text" class="form-control" placeholder-" Harga" name="price" 
required /> 


<hr/> 
<hr/> 


</form> 


</div> 


</div> 


</div> 
<script src="js/jquery.multifield.js"></script> 
<script> 

$(‘#example-1').multifieldQ; 


</script> 
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<?php endif; ?> 


So the interface will be 


Product Donation = Search for... Q 


» 
M 


@B Dashboard 


Dashboard / Iproduct 


Bu Menu 


Tambah 
Produk 
Admin: 


User 


Show 10 2 entries Search: 


Nama 
Produk | Picture 


Buku Tulis 
SINAR 
DUNIA / 
SIDU 10x38 
Lembar 


Tambah 


Produk 


Dashboard / product 
EBProduk 


Tambah Product 


Simpan Batal 


Nama Produk 


Nama Produk 


Gambar 


| Choose File | No file chosen 


Harga 


Harga 


Now you cann add product from admin page © 
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This is time for you to improve you coding skill 


Crete your own code for Master user 


Product Donation = 


Dashboard 
© Dashboar Dashboard / user 


Warning: include(user.php): failed to open stream: No such file or directory in G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 
Admin: 


Product Warning: include(): Failed opening 'user.php' for inclusion (include_path='G:\xampp\php\PEAR’) in G:\xampp\htdocs\ProductDonations\admin\index.php 


on line 176 


Create user.php 


> xampp » htdocs » ProductDonations » admin 


Date eo 


Name Type SIZE 
s index.php 2019-02-15 7:02PM PHP File 9 KB 
E totaldonation.php 2019-02-10 6:22 AM PHP File 3 KB 
Bi product.php 2019-02-10 2:47 AM PHP File 4 KB 
2019-02-15 7:23 PM PHP File O KB 
login.php | 2019-02-09 5:22 PM PHP File 3 KB 
El „gitignore 2019-01-31 5:45PM” Text Document 1 KB 
|] travis.yml 2019-01-31 3:45PM YML File 1 KB 
O 404.html 2019-01-31 545PM Opera Web Docu... 8 KB 
O blank. html 2019-01-31 5:45PM” Opera Web Docu... 8 KB 
O charts.html 2019-01-31 5:45PM Opera Web Docu... 9 KB 
O forgot-password. html 2019-01-31 3:45PM Opera Web Docu... 2 KB 
™, gulpfilejs 2019-01-31 545PM JavaScript File 4 KB 
| ] LICENSE 2019-01-31 5:45PM File 2 KB 
O login.html 2019-01-31 545PM Opera Web Docu... 3 KB 
a package.json 2019-01-31 5:45PM JSON File 2 KB 
E] package-lock.json 2019-01-31 545PM JSON File 261 KB 
3 README.md 2019-01-31 5:45 PM MD File 5 KB 
O register.html 2019-01-31 545PM Opera Web Docu... 4 KE 
O tables.html 2018-01-31 5:45PM” Opera Web Docu... 25 KB 
[i php 2019-02-15 7:07PM File folder 
M css 2019-01-31 5:45PM File folder 
[ js 2019-01-31 545PM File folder 
SC55 2019-01-31 545PM File folder 
p vendor 2019-01-31 545PM File folder 


132 


Then write your own code for user's form © btw you can look at product.php as your reference 


© Good Luck! 


For Laporan menu create file named laporan.php 


xampp » htdocs » ProductDonations » admin 


Name 


g user.php 
s index.php 


s product.php 
laporan.php 


login.php 
.gitignore 
(1 travis.yml 
O 404.htm] 
O blank.htmi 
O charts.html 
O forgot-password.html 


>. qulpfile.js 

| ] LICENSE 

Q login.html 
E) package.json 


É | package-lock.json 


| README.md 
O register.html 
O tables.htmi 


s totaldonation.php 


Date scria 


2019-02-15 7:23 PM 
2019-02-15 7:02 PM 
2019-02-10 6:22 AM 
2019-02-10 2:47 AM 
2019-02-09 5:42 PM 
2019-02-09 5:22 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 3:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-02-15 7:07 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 3:45 PM 


Type 

PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
Text Document 
YML File 


Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 


JavaScript File 
File 


Opera Web Docu... 


JSON File 
JSON File 
MD File 


Opera Web Docu... 
Opera Web Docu... 


File folder 
File folder 
File folder 
File folder 
File folder 


Size 


Ü KB 
9 KB 
3 KB 


4 KB 


3 KB 
1 KB 
1 KB 
8 KB 
3 KB 
9 KB 
2 KB 
4 KB 
2 KB 
3 KB 
2 KB 
261 KB 
5 KB 
4 KB 
25 KB 
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And write this code 


«!-- Area Chart Example--> 
«div class="card mb-3"> 
<div class="card-header"> 
<i class="fas fa-chart-area"></i> 
Report Donasi Bulan Maret 2019</div> 
<div class="card-body"> 
«canvas 1d="myAreaChart" width- "10096 " height="30"></canvas> 
</div> 
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 


</div> 


Product Donation = | Search for. | Q 


ò Dashboard 


Dashboard / laporz 
Mu | 
lea Report Donasi Bulan Maret 2019 


lês Lay 


Copyright & Oke Iya Siyap 2019 


Come on you can improve the empty page to your awesome report’s page © 
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Oke the last part of this chapter is login as ngo user 


Username: ngo, Password: ngo 


Product Donation = 


@ Dashboard | 
Dashboard / Overview 


Bm Menu 
1 Total Donatur 
NGO: 
EB Data Donasi 
Gallery 
Show 10 $ entries Search: 
Nama ï Produk Jumlah Tanggal 
Anonym Spidol Snowman White Board Maker 1 2019-02-14 15:09:20 
Nama Produk Jumlah Tanggal 


Showing 1 to 1 of 1 entries Previous Next 


Create donation.php then write this code 

<?php 
Saction = isset(5 GET['action'])?S GET['action']:": 
if(Saction == "): 


?> 


135 


«a href="index.php?page=donation&action=add"><button class="btn btn-primary mb-2" 
style="margin-left: 89%;">Tambah Donasi«/button»«/a» 


«div class="card mb-3"» 
«div class="card-header"><i class="fas fa-table"></i>Donasi</div> 
<div class="card-body"> 
<div class="table-responsive"» 
«table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 

<thead> 

<tr> 
<th>Judul Donasi</th> 
<th>Keterangan Donasi</th> 
<th>Picture</th> 
<th>Tanggal</th> 

</tr> 

</thead> 

<tfoot> 

<tr> 
<th>Judul Donasi</th> 
<th>Keterangan Donasi</th> 
<th>Picture</th> 
<th>Tanggal</th> 

</tr> 

</tfoot> 

<tbody> 
<?php 


SdataHistory = mysgli guery(Skonek, " 
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SELECT “ FROMt donation 
`» 
while(Sh = mysgli fetch assoc(SdataHistory)): 
?> 
<tr> 


<td><a href="index.php?page=donation_detail_view&t_donation_id=<?php echo Sh['id']: 
?»"»«?php echo Sh['title']; ?»«/a»«/td» 


<td><?php echo Sh['description'], ?»«/td» 


<td><img src="../img/<?php echo Sh['picture']: ?>" alt="Image not loaded" class="card- 
image-top"></td> 


<td><?php echo Sh['created'], ?»«/td» 
</tr> 
<?php 
endwhile; 
?> 
</tbody> 
</table> 
</div> 
</div> 
<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 
<?php 
elseif(Saction == 'add'): 
?> 
<!-- <div class="panel panel-default "> 
<div class="card mb-3"> 


<div class="card-header"><i class="fas fa-table"></i>Donasi</div> 
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«div class="card-body"» 
«form action="php/donation.php" method="POST" enctype="multipart/form-data"» 
<h3>Tambah Donasi</h3> 


«a href="index.php?page=donation"»«button type="button" class="btn btn-danger" 
style="width: 5096; float: right;"»Batal«/button»«/a» 


«button type="submit" class="btn btn-primary" style="width: 50%;">Simpan</button> 


«Hr/» 


«label»Judul Donasi«/label» 


«input type="text" class="form-control" placeholder="Judul Donasi" name="title" required /» 


«label»Keterangan Donasi«/label» 


«textarea class="form-control" placeholder-"Keterangan donasi Donasi" rows="10" 
name="description" required»«/textarea» 


<label>Picture</label> 


<input type- "file" name="picture" class="form-control" required? 


<label>Tanggal Berakir</label> 


<input type="text" name="due date" class="form-control" required> 


<hr/> 
«h5»Produk yang dibutuhkan«/h5» 


«div id="example-1" class="content" data-mfield-options='("section": 
".group", btnAdd":"#btnAdd-1","btnRemove":".btnRemove'}'> 


<div class="row" style="margin-left: 68.5%;"> 
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«div class="col-md-12"»«button type-"button" id-"btnAdd-1" class="btn btn- 
primary"»«span class="fa fa-plus"»«/span»«/button»«/div» 


«/div» 
«div class="row group mt-2"» 
«div class="col-md-4"» 
«select name="product id[]" class="form-control" required» 
«option value=""»-- Pilih Produk --«/option» 
«?php 
SdataProduk = mysgli query(Skonek, " 
SELECT * FROM m_ products 
D 
while(Sproduk = mysqli fetch assoc(SdataProduk)): 
?> 


<option value="«?php echo Sproduk['id']: ?>"><?php echo Sproduk['name']: 
?»«/option» 


<?php endwhile; ?» 
</select> 
</div> 
<div class="col-md-2"> 
<input class="form-control" type="number" min="1" name-"qty need[]" required» 
</div> 
<div class="col-md-2" style="visibility: hidden> 


«input class="form-control" type="number" min="1" name="qty donated[]" 
default="0"> 


</div> 


<div> 
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«button type="button" class="btn btn-danger btnRemove" style="margin-left: 
79.396, »xspan class="fa fa-trash"»«/span»«/button» 


«/div» 
«/div» 
«/div» 
«hr/» 


«/form» 


«/div» 
«/div» 
«/div» 
«script src="js/jquery.multifield.js"></script> 
«script» 
S('texample-1').multifield(); 


«/script» --» 


<div class="panel panel-default "> 
<div class="card mb-3"> 
<div class="card-header"><i class="fas fa-table"></i>Donasi</div> 
«div class="card-body"> 
<form action="php/donation.php" method="POST" enctype="multipart/form-data"> 
<h3>Tambah Donasi</h3> 


«a href="index.php?page=donation"»«button type="button" class="btn btn-danger" 
style="width: 5096, float: right;">Batal</button></a> 


«button type="submit" class="btn btn-primary" style="width: 50%;">Simpan</button> 


«Hr/» 
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«label»Judul Donasi«/label» 


<input type="text" class="form-control" placeholder-"Judul Donasi" name="title" required /» 


«label»Keterangan Donasi«/label» 


«textarea class="form-control" placeholder-"Keterangan donasi Donasi" rows="10" 
name-"description" required»«/textarea» 


<label>Picture</label> 


<input type-"file" name="picture" class-"form-control" required? 


<label>Tanggal Berakir</label> 


<input type="text" name-"due date" class="form-control" required> 


<hr/> 


</form> 


</div> 
</div> 
</div> 


<?php endif; ?» 
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Dashboard / donation 


EBDonasi 
Show 10 2 entries Search: 
Judul Keterangan 
Donasi | Donasi Picture T 
Korban Kendal 2 
Banjir memanggil! 1 
Kendal Korban banjir 0 
butuh bantuan 
Anda untuk 
pulih kembali. 
EBDonasi 


Tambah Donasi 


Simpan Batal 


Judul Donasi 


Judul Donasi 


Keterangan Donasi 


Keterangan donasi Donasi 


Picture 


Choose File | No file chosen 


Tanaaal Berakir 
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And if you click link in donations list 


EBDonasi 

Show 10 g entries Search: 
Judul Keterangan 
Donasi | Donasi Picture 


Korban Kendal 
Banjir memanggil! 


Kendal Korban banjir 
butuh bantuan 


Dashboard / donation detail view 


() N 


Warning: include(donation detail view.php): failed to open stream: No such file or directory in G:\xampp\htdocs\ProductDonations\admin\index.php on 


line 176 


Warning: include): Failed opening 'donation detail view.php' for inclusion (include_path="G:\xampp\php\PEAR’) in 
G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 


We are going to create donations detail such as what products needed, etc 
So create donation detail view.php and write this code 
«?php 
Sdonasi id = isset(S GET['t donation id'])?S GET['t donation id']:"; 
?> 
<a href="index.php?page=donation'"» 


«button class="btn btn-primary" style="margin-left: 75.5%; margin-bottom: 1%;">Daftar 
Donasi</button> 


</a> 
<a href="index.php?page=donation_detail&t_donation_id=<?php echo Sdonasi id; ?>"> 


<button class="btn btn-primary" style-"margin-left: 0.1%; margin-bottom: 1%;">Tambah 
Produk</button> 


</a> 


<?php 
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Sid donasi = isset(5 GET['t donation id'])?S GET['t donation id']:": 
SgetDonasi = mysqli query(Skonek, " 
SELECT * FROM t donation WHERE id = 'Sid donasi' 
» 
Sdata = mysgli fetch assoc(SgetDonasi); 


?> 


<center> 
<img src="../img/«?php echo Sdata['picture']; ?»" alt=""> 
<h4><?php echo Sdata['title']: ?»«/h4» 
<p><?php echo Sdata['description']: ?></p> 


</center> 


<div class="card mb-3"> 
<div class="card-header"><i class="fas fa-table"></i>Donasi</div> 
<div class="card-body"» 
<div class="table-responsive"» 
«table class="table table-bordered" id="dataTable" width="100%" cellspacing="0"> 
<thead> 
<tr> 
<th>Nama Produk</th> 
<th>Gambar</th> 
<th>Jumlah Dibutuhkan</th> 
</tr> 


</thead> 
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«tfoot» 
«tr 
«th»Nama Produk«/th» 
<th>Gambar</th> 
<th>Jumlah Dibutuhkan</th> 
</tr> 
</tfoot> 
<tbody> 
<?php 
SdataHistory = mysqli query(Skonek, " 
SELECT “ FROMt donation needs a 
INNER JOIN m products b 
ON a.product id = b.id 
WHERE t donation id = 'Sdonasi id' 


WE 


while(Sh = mysgli fetch assoc(SdataHistory)): 


?> 
<tr> 
<td><?php echo Sh['name']; ?></td> 


<td><?php echo Sh['picture']: ?»«/td» 


<td><?php echo Sh['qty_need']; ?»«/td» 


</tr> 
<?php 
endwhile; 


?> 
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«/tbody» 
«/table» 
</div> 

</div> 


<div class="card-footer small text-muted">Updated yesterday at 11:59 PM</div> 


Dashboard / donation_detail_view 


Korban Banjir Kendal 


When you click Tambah Produk Button 


Dashboard / donation_detail 


Warning: include(G:\xampp\htdocs\ProductDonations\admin\donation_detail.php): failed to open stream: No such file or directory in 
G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 


Warning: include(): Failed opening 'donation detail.php' for inclusion (include_path='G:\xampp\php\PEAR’) in 
G:\xampp\htdocs\ProductDonations\admin\index.php on line 176 


Create donation_detail.php and write this code 

<?php 
Sid donasi = isset(5 GET['t donation id'])?S GET['t donation id']:": 
SgetDonasi = mysqli query(Skonek, " 


SELECT * FROMt donation WHERE id = 'Sid donasi' 
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» 
Sdata = mysgli fetch assoc(SgetDonasi); 


?> 


<input type="hidden" name="id donasi" value="«?php echo Sdata['id']: ?>"> 


<a href-"index.php?page-donation detail view&t_donation_id=<?php echo Sdataf['id']; ?>"><button 
class="btn btn-primary" style="margin-left: 86.5%; margin-bottom: 1%;">Lihat Detail 
Donasi</button></a> 


<center> 
<img src="../img/«?php echo Sdata['picture']; ?»" alt=""> 
<h4><?php echo Sdata['title']; ?»«/h4» 
<p><?php echo Sdata['description']: ?></p> 
</center> 
«form action-"index.php?" method="GET"» 
<input type="hidden" name="page" value="donation detail'» 
<input type="hidden" name-"t donation id" value="«?php echo Sdata['id'] ?»"/» 


<input type="text" name-"search" placeholder-"Cari Produk..." class-"form-control" 
autocomplete-"off" /» 


«/form» 
«div class="row mt-2"» 
«?php 
Sname search = isset(S GET['search'])?S GET['search'|]:": 
SgetProduk = mysqli query(Skonek, " 
SELECT * FROM m products 
WHERE name LIKE '%".Sname_search."%' 
» 
while(SdataProduk = mysgli fetch assoc(SgetProduk)): 


147 


?> 
«div class="col-md-4"» 
«div class="card"> 


<img style="height: 200px; width: 320px:" src="../img/«?php echo SdataProduk['picture']: ?»" 
alt="Image" class="card-image-top"> 


«div class="card-body"> 
«center» 
«h4 class="card-title"»«?php echo SdataProduk['name']; ?»«/h4» 


«button onclick="decreaseProduct(this,«?php echo Sid donasi.','.SdataProduk['id']: ?»)" 
type="button" class="btn btn-primary" id produk="«?php echo SdataProduk['id']; ?>"> 


«span class="fa fa-minus"»«/span» 
«/button» 


«input id="totalProduk" onchange="editProduct(this,<?php echo 
Sid donasi.','.SdataProduk['id']: ?>)" data-onload="totalProduct(this,«?php echo 
Sid donasi.','.SdataProduk['id']: ?»)" type-"number" min="1" style="width: 2096;" /> 


«button onclick="addProduct(this,«?php echo Sid donasi.','.SdataProduk['id']: ?»)" 
type="button" class="btn btn-primary" id produk="«?php echo SdataProduk['id']; ?»"» 


«span class="fa fa-plus"»«/span» 
«/button» 
«/center» 
«/div» 
«/div» 
«/div» «!-- end col-md-4 --» 
<?php endwhile; ?» 
</div> 


<script> 
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// onload, call calculate function 
S('[data-onload]').each(function(M 
eval(S(this).data('onload')); 


D; 


function totalProduct(elem, id donasi,id produk) 
S.ajax(( 
type: 'POST', 
url: 'ajax handler.php', 
data: "act-get total produk by id donasi&id donasi- "rid donasit Kid produkz- "rid produk, 
success: function(response) ( 


S(elem).val(response): 


)); 


function addProduct(elem, id donasi,id produk) 
S.ajax({ 
type: 'POST', 
url: 'ajax handler.php', 
data: "act=add total produk by id donasi&id donasi-"tid donasi" &id produk="wid produk, 
success: function(response) ( 


S(elem).prev("#totalProduk").val(response); 


D; 
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function decreaseProduct(elem, id donasi,id produk)i 
if(S(elem).next("#totalProduk").val() > 0) 
5.ajax(f 
type: 'POST', 
url: 'ajax handler.php', 


data: 
"act=decrease total produk by id donasi&id donasi-"tid donasit"&id produk="wid produk, 


success: function(response) ( 


S(elem).next("tttotalProduk").val(response); 


BE 
lelsef 


alert( "Udah O ndro, apalagi yang dikurangi :v"); 


function editProduct(elem, id donasi,id produk) 
S.ajax({ 
type: 'POST', 
url: 'ajax handler.php', 


data: 
"act=edit total produk by id donasi&id_donasi="+id_donasi+"&id_produk="+id_produk+"&new_qty= 
"+S(elem).val(), 


success: function(response) { 


S(elem).val(response); 
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D; 


</script> 


sai Ak 
agi] Y | 
t 
3 | 
i 


Korban Banjir Kendal 


Kendal memanggil! Korban banjir butuh bantuan Anda untuk pulih kembali. 


When you want to add product as your donation 


Cari Produk... 


Buku Tulis SINAR DUNIA / Whiteboard Magnet Spidol Snowman White 
SIDU 10x38 Lembar SAKANA 90 x 180 cm Board Maker 


a D D D D E 


Then we need to add Ajax to store the product to database depends on guantity we set 
Create ajax handler.php and write this file 
«?php 


include "../config/koneksi.php"; 


if(!empty($_POST)){ 
$data = $_POST; 
Sid donasi = isset(Sdata['id donasi'])?Sdata['id donasi']:": 
Sid produk = isset(Sdata['id produk'])?Sdata['id produk']:": 


Snew qty =isset(Sdata['new qty'])?Sdata['new qty']:”; 


switch (Sdata['act']) 4 

case 'get total produk by id donasi': 
echo getCountDataProductByldDonation(Sid donasi,Sid produk); 
break; 

case 'add total produk by id donasi': 
echo addDataProductByldDonation(Sid donasi,Sid produk); 
break; 

case 'edit total produk by id donasi': 
echo editDataProductByldDonation(Sid donasi,Sid produk,Snew qty); 
break, 

case 'decrease total produk by id donasi': 
echo decreaseDataProductByldDonation(Sid donasi,Sid produk): 
break, 


default: 
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function getCountDataProductByldDonation(Sid donasi,Sid produk) 
GLOBAL Skonek: 
SgetCountData = mysgli query(Skonek, " 
SELECT qty need FROMt donation needs 
WHERE 
t donation id = ".Sid donasi." 
AND 
product id = ".Sid produk." 
» 
StotalData = mysgli fetch assoc(SgetCountData); 
StotalData = !empty(StotalData['qty need'])?StotalData['qty need'J:0: 


return StotalData; 


function addDataProductByldDonation(Sid donasi,Sid produk)i 
GLOBAL Skonek; 
mysqli query(Skonek, " 
INSERTINTOt donation needs 
(t donation id, product id, qty need) 


VALUES 
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('Sid donasi', 'Sid produk', 1) 
ON DUPLICATE KEY UPDATE 


qty need =qty_need+1 


return getCountDataProductByldDonation(Sid donasi,Sid produk); 


function decreaseDataProductByldDonation(Sid donasi,Sid produk)f 
GLOBAL Skonek; 
mysqli query(Skonek, " 
INSERTINTOt donation needs 
(t donation id, product id, qty need) 
VALUES 
('Sid donasi', 'Sid produk', O) 
ON DUPLICATE KEY UPDATE 


gty need =qty need-1 


return getCountDataProductByldDonation(Sid donasi,Sid produk); 


function editDataProductByldDonation(Sid donasi,Sid produk, Snew qty) 
GLOBAL Skonek; 


mysqli query(Skonek, " 
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INSERT INTOt donation needs 

(t donation id, product id, gty need) 
VALUES 

('Sid donasi', 'Sid produk', 1) 
ON DUPLICATE KEY UPDATE 


qty need = 'Snew qty' 


return getCountDataProductByldDonation(Sid donasi,Sid produk); 


?> 


Ok we’ve done with donations page 


For Gallery’s menu, create file gallery.php then challenge your self to create form for input gallery © 
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In the end you admin folder structure will be 


> xampp > htdocs > ProductDonations 


Name 


g user. php 
s index.php 
< donation.php 
g donation_detail.php 
g donation detail view.php 
S totaldonation.php 
El ajax handler.php 
g product.php 
El gallery.php 
E laporan.php 
g login.php 
=| .gitignore 
i travissyml 
O 404.html 
© blank.html 
O charts.html 
O forgot-password. html 
== gulpfile.js 
| ] LICENSE 
O login.html 
4 package.json 
E] package-lock.json 
l README.md 
O register.html 
© tables.html 
php 


CES 
Bi 


| have a good news for you 


We are now done with our application!!! 


Date m — 


2019-02-15 7:23 PM 
2019-02-15 7:02 PM 


2019-02-10 7:52 AM 


2019-02-10 7:50 AM 
2019-02-10 7:50 AM 
2019-02-10 6:22 AM 


2019-02-10 2:55 AM 


2019-02-10 2:47 AM 
2019-02-09 5:45 PM 
2019-02-09 5:42 PM 
2019-02-09 5:22 PM 
2019-01-31 3:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 3:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 
2019-02-15 7:07 PM 
2019-01-31 5:45 PM 
2019-01-31 5:45 PM 


It's been a long time since our first code, but its funny right? 


Hope this ebook help you and makes you fun! Coding Is Fun! © 
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PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
PHP File 
Text Document 
YML File 


Opera Web Docu... 
Opera Web Docu... 
Opera Web Docu... 


Opera Web Docu... 


JavaScript File 
File 


Opera Web Docu... 


JSON File 
JSON File 
MD File 


Opera Web Docu... 
Opera Web Docu... 


File folder 
File folder 
File folder 


Size 
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